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

【问题标题】：js - function to display a different line of text for each selectionjs - 为每个选择显示不同的文本行的函数
【发布时间】：2019-08-04 14:21:03
【问题描述】：

我是 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>

我没有输出

【问题讨论】：

最好在你定义函数之后调用函数，确保你的DOM加载之前你的脚本运行，并使用==进行比较，不是 =。这应该可以解决你所有的问题。

标签： javascript html output display

【解决方案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>

【讨论】：

【解决方案2】：

在 Javascript 中，您应该使用 === 运算符进行比较。 Comparison Operators 链接到w3schools

【讨论】：

【解决方案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>

【讨论】：