javascript - 如果声明不起作用 - 有什么想法吗？

Question

我在使用 if 语句时遇到了一些问题。在 html 中，我有一个包含三个选项的下拉菜单，根据用户选择的选项，按下提交按钮后将生成一组不同的文本。

这就是我的脚本头中的内容:

function hair() {
    if (document.getElementById("hair").value == "2") {
        document.getElementById("background").innerHTML = "Well done, it worked!";
    }
}

这是在我希望 JavaScript 对应的 HTML 中:

<div id ="hair">
  What colour hair would you like your doll to have?
  <select name = "hair" id ="hair">
    <option id="brown" value="0">Brown</option>
    <option id="blonde" value="1">Blonde</option>
    <option id="red" value="2">Red</option>
  </select>
</div>

我本质上是想让页面说“干得好，成功了!”当用户选择“红色”并按下按钮时。谁能告诉我我可能做错了什么？我几乎是一个初学者，所以简单的解释将不胜感激!谢谢!

Answer 1

您的代码中存在一些问题:

• 您没有在更改选择时调用该函数
  
• 您有重复的 div 头发，id 必须是唯一的
  

试试这个:

function hair() {
    if (document.getElementById("select-hair").value == "2") {
        document.getElementById("background").innerHTML = "Well done, it worked!";
    }
}

使用以下 HTML:

<div id ="hair">
  What colour hair would you like your doll to have?
  <select name = "hair" id ="select-hair" onchange="hair()">
    <option id="brown" value="0">Brown</option>
    <option id="blonde" value="1">Blonde</option>
    <option id="red" value="2">Red</option>
  </select>
</div>