js - 为每个选择显示不同文本行的函数

Question

我是 js 新手，需要一些家庭作业方面的帮助。我创建了一个从 1 到 12 的数字列表，我需要浏览器在每次选择时显示不同的输出。因此，如果我选择数字 1 并单击按钮，它应该调用一个函数来检查该数字的值并在下面显示相应的消息....

就此而言，我对 js 或一般编程了解不多。我知道我尝试的可能都是错误的，但我希望我至少了解我需要什么。

<head>
<script>
myFunction();
function myFunction() {
var track = document.getElementById("Selection");
if (track = 1) {
document.getElementById("demo").innerHTML = "1111"
}
</script>
</head>
<body>
Select A Track For More Information:
<select id="Selection">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<br><br>
<input type="button" onclick="myFunction()" 
value="Click Here For More Information">
</form>
<p id="demo"></p>
</body>

我没有输出

Answer 1

在您的代码中您没有获得 select 的值，您还需要使用 == 运算符进行比较。即：

//onload calling function
myFunction();
function myFunction() {
//getting value of select
var track = document.getElementById("Selection").value;
//if select value is 1
if (track ==1) {
//print message
document.getElementById("demo").innerHTML = "1 Your message";
}else if (track ==2) {
document.getElementById("demo").innerHTML = "2 Your message";
}
else if (track ==3) {
document.getElementById("demo").innerHTML = "3 Your message";
}
else if (track ==4) {
document.getElementById("demo").innerHTML = " 4 Your message";
}else{
document.getElementById("demo").innerHTML = " Your message";
}
}

<body>
Select A Track For More Information:
<select id="Selection">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<br><br>
<input type="button" onclick="myFunction()" 
value="Click Here For More Information">

<p id="demo"></p>
</body>

Answer 2

在Javascript中你应该使用===运算符来比较。 Comparison Operators Link 至 w3schools

Answer 3

解决方案：

'if' 条件应该是 === 或 !== 运算符。为了让您更好地理解，我们做了一些小改动。

代码片段：

<body>
  Select A Track For More Information:
  <select id="Selection">
    <option selected>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
  <br><br>
  <input type="button" onclick="myFunction()" 
  value="Click Here For More Information">
  <p id="demo"></p>
  
  <script>
  function myFunction() {
     var track = document.getElementById("Selection");
     // checks if value is non-zero
     if (track.value && track.value !== "0") {
      document.getElementById("demo").innerHTML = track.value + " is the chosen value!";
     } else {
      document.getElementById("demo").innerHTML = "Selected value is not supported!";
     }
   }
   
   myFunction();
  </script>
</body>

js - 为每个选择显示不同文本行的函数

js - function to display a different line of text for each selection

html

javascript

output

display