如果 Else & Switch 语句不适用于 HTML 形式的值（与 JavaScript 交互）

Question

我正在创建一个小部件，用户可以在其中从一些单选按钮中选择一个选项，并通过 JavascriptCoding 创建对用户的响应（响应因用户选择的选项而异）。我可以让小部件显示用户在句子中选择了哪个选项（"You have selected " 某事，这是您的建议：”）。

但是，在这一行之后我想创建一个实际给用户推荐的语句（小部件的概念是：用户从选项中选择大学学位，程序返回给他们与学位相关的推荐科目）。

每次我尝试 If/else 语句或 "switch" 语句时，在我测试小部件时没有任何反应（甚至不显示 "you have chosen..." 部分）。我已经包括了我的最后一次尝试。如果删除 switch 语句，则响应的第一部分有效，如果包含它，则按 "Submit!"

时不会发生任何事情

代码：

<!DOCTYPE html>
<html>

<script language="JavaScript">
   var degreeChoice = (form.degree.value)
    function processDegrees (form) {
      var degreeChoice = (form.degree.value);
            document.write ("You chose" + " " + degreeChoice + ", here are your reccomendations:" + " ")
   };

    switch(degreeChoice) {
case "agriculture":
        document.write("It works");
        [break;]
case "arts":
            document.write("still works");
            [break;]
default:
        document.write("An error has occurred");
        [break;]
}

</script>       

    <body>
<form name="chooseDegrees" action=" " method="get">
    <h1>Choose Degrees:</h1>
  <input type="radio" name="degree" value="agriculture"> Agriculture
<br>
  <input type="radio" name="degree" value="arts"> Arts
<br> 
  <input type="radio" name="degree" value="biomedicine"> Biomedicine
<br>
  <input type="radio" name="degree" value="commerce"> Commerce
<br>
  <input type="radio" name="degree" value="environments"> Environments
<br>
  <input type="radio" name="degree" value="fine arts"> Fine Arts
<br>
  <input type="radio" name="degree" value="music"> Music
<br>
  <input type="radio" name="degree" value="oral health"> Oral Health
<br>
  <input type="radio" name="degree" value="science"> Science
<br><br> 
<input type="submit"value="Submit!" onclick="processDegrees(this.form)">
</form> 

</body>
</html>

Answer 1

加载后无法使用 document.write - 它会擦除页面
您不能使用提交并希望留在页面上。我把它移到表单的 onsubmit 和 return false 不提交
你有 [break] 而不仅仅是 break
函数外有一个var degreeChoice = (form.degree.value);
函数在 };

试试这个：

<!DOCTYPE html>
<html>

<script language="JavaScript">
  function processDegrees (form) {
    var degreeChoice = (form.degree.value);
    text="You chose " + degreeChoice + ", here are your recommendations: ";

    switch(degreeChoice) {
      case "agriculture":
        text += "It works";
        break;
      case "arts":
        text +="still works";
        break;
      default:
        text+="An error has occurred";
        break;
    }
    document.getElementById("result").innerHTML=text;
    return false; // cancel submission
  }
</script>       

    <body>
<form name="chooseDegrees" action=" " method="get" onsubmit="return processDegrees(this)">
    <h1>Choose Degrees:</h1>
  <input type="radio" name="degree" value="agriculture"> Agriculture
<br>
  <input type="radio" name="degree" value="arts"> Arts
<br> 
  <input type="radio" name="degree" value="biomedicine"> Biomedicine
<br>
  <input type="radio" name="degree" value="commerce"> Commerce
<br>
  <input type="radio" name="degree" value="environments"> Environments
<br>
  <input type="radio" name="degree" value="fine arts"> Fine Arts
<br>
  <input type="radio" name="degree" value="music"> Music
<br>
  <input type="radio" name="degree" value="oral health"> Oral Health
<br>
  <input type="radio" name="degree" value="science"> Science
<br><br> 
<input type="submit "value="Submit!">
</form> 
<div id="result"></div>    
</body>
</html>

例子

 function processDegrees(form) {
   var degreeChoice = (form.degree.value);
   text = "You chose " + degreeChoice + ", here are your recommendations: ";
 switch (degreeChoice) {
   case "agriculture":
     text += "It works";
     break;
   case "arts":
     text += "still works";
     break;
   default:
     text += "An error has occurred";
     break;
 }
 document.getElementById("result").innerHTML = text;
 return false; // cancel submission
 }

<form name="chooseDegrees" action=" " method="get" onsubmit="return processDegrees(this)">
  <h1>Choose Degrees:</h1>
  <input type="radio" name="degree" value="agriculture">Agriculture
  <br>
  <input type="radio" name="degree" value="arts">Arts
  <br>
  <input type="radio" name="degree" value="biomedicine">Biomedicine
  <br>
  <input type="radio" name="degree" value="commerce">Commerce
  <br>
  <input type="radio" name="degree" value="environments">Environments
  <br>
  <input type="radio" name="degree" value="fine arts">Fine Arts
  <br>
  <input type="radio" name="degree" value="music">Music
  <br>
  <input type="radio" name="degree" value="oral health">Oral Health
  <br>
  <input type="radio" name="degree" value="science">Science
  <br>
  <br>
  <input type="submit" value="Submit!">
</form>
<div id="result"></div>

如果 Else & Switch 语句不适用于 HTML 形式的值（与 JavaScript 交互）

If Else & Switch statements do not work with values from HTML form (made interactive with JavaScript)

html

javascript

if-statement

widget

radio-button