选择特定选项事件处理程序 [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() {

  if (document.querySelector("#genre").value == "impressionism") {

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

    document.querySelector("#wrong").style.display = "none";

    } else {

    document.querySelector("#wrong").style.display = "block";

    document.querySelector("#right").style.display = "none";

    }

});

<select id="genre">

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

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

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

  <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">

  Well done!

</div>

<div id="wrong" class="alert alert-warning" role="alert" style="display: none">

  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>