选择特定选项事件处理程序 [javascript]

Question

我是 javascript 的超级新手。

我正在尝试制作一段代码，当用户单击下拉菜单中的特定项目并单击提交按钮时显示成功警报（以及其他项目的警告警报+提交）

这是html部分：

        <select>

            <option id="realism">Realism</option>

            <option id="impressionism">Impressionism</option>

            <option id="post">Post-Impressionism</option>

            <option id="default"selected>Choose your answer</option>

        </select>

        <button class="btn btn-primary" type="submit">Submit</button>

        <br>

        <div id="right"class="alert alert-success" role="alert" display="none">

          Well done!

        </div>

        <div id="wrong"class="alert alert-warning" role="alert">

          Try again!

        </div>

这是我尝试的 JS：

<script>

    //defining variables

    let right = document.querySelector('#right');

    let wrong = document.querySelector('#wrong');

    //setting them to display none

    right.style.display = 'none';

    wrong.style.display = 'none';

    if (document.querySelector('#impressionism').onclick && document.querySelector('button').onclick)

    {

        document.querySelector('#right').style.display = 'block';

    }

</script>

最后两行不起作用，我不明白为什么。我已经尝试过 onclick、onchange 和其他选项。

Answer 1

提供选项值并为其分配一个 ID，然后<select>您可以在提交按钮的事件侦听器中检查下拉列表的值。另外，display不是属性，应该是style="display: none"document.querySelector("#submitBtn").addEventListener("click", function() {&nbsp; if (document.querySelector("#genre").value == "impressionism") {&nbsp; &nbsp; document.querySelector("#right").style.display = "block";&nbsp; &nbsp; document.querySelector("#wrong").style.display = "none";&nbsp; &nbsp; } else {&nbsp; &nbsp; document.querySelector("#wrong").style.display = "block";&nbsp; &nbsp; document.querySelector("#right").style.display = "none";&nbsp; &nbsp; }});<select id="genre">&nbsp; <option value="realism">Realism</option>&nbsp; <option value="impressionism">Impressionism</option>&nbsp; <option value="post">Post-Impressionism</option>&nbsp; <option value="default" selected>Choose your answer</option></select><button id="submitBtn" class="btn btn-primary" type="submit">Submit</button><br><div id="right" class="alert alert-success" role="alert" style="display: none">&nbsp; Well done!</div><div id="wrong" class="alert alert-warning" role="alert" style="display: none">&nbsp; Try again!</div>

Answer 2

Barmar 的回答完成了工作，但那里有很多无关和不必要的代码。您无需设置元素value的属性option即可访问 ，option.value因为默认情况下.valuean 的 option将是其文本。您不应该为相同的元素一遍又一遍地重新查询文档——那只会浪费时间和资源。获取您需要多次的参考文献一次。避免使用内联样式，因为它们会导致您不得不编写冗余代码（这不能很好地扩展），并且内联样式在以后需要时最难覆盖。相反，始终尝试使用 CSS 类，然后可以使用 .classListAPI轻松添加或删除它们。您实际上并没有在任何地方提交数据，因此您应该使用常规的button，而不是submit按钮。您不需要设置两个单独的区域来显示结果。您可以只拥有一个区域并动态设置其中的文本及其样式。onclick您询问了设置和使用之间的区别addEventListener......存在差异 ，您应该使用现代的.addEventListener.let lstGenre = document.querySelector("#genre");let result = document.querySelector("#result");document.querySelector("button[type='button']").addEventListener("click", function() {  result.classList.remove("hidden");  if (lstGenre.value == "Impressionism") {    result.textContent = "Correct!";    result.classList.remove("alert-warning");    result.classList.add("alert-success");  } else {    result.textContent = "Try again!";    result.classList.remove("alert-success");    result.classList.add("alert-warning");  }});.hidden { display:none; }.alert { border:1px solid black; }.alert-success { background-color:green;}.alert-warning { background-color:yellow;}<select id="genre">  <option value="" selected>Choose your answer</option>  <option>Realism</option>  <option>Impressionism</option>  <option>Post-Impressionism</option></select><button class="btn btn-primary" type="button">Submit</button><br><div id="result" class="alert hidden" role="alert"></div>