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

如何解决选择特定的选项事件处理程序[javascript]

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

最后2行无效，我也不明白为什么。我已经尝试过onclick，onchange和其他选项。

谢谢！

解决方法

给出选项值并为<select>分配一个ID，然后您可以在事件监听器中检查下拉按钮的提交按钮值。

此外，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>

,

Barmar的答案可以完成工作，但是那里有很多无关紧要的代码。

• 您无需将value元素的option属性设置为 能够访问option.value，因为 默认情况下，.value是其文本。
• 您不应一遍又一遍地重新查询文档 元素-那只是浪费时间和资源。获取参考 您一次只需要很多次。
• 避免使用内联样式，因为它们会导致您不得不 编写冗余代码（伸缩性不好），并且内联样式是 如果需要，最难覆盖。相反，请始终尝试 使用CSS类，然后可以使用 .classList API。
• 您实际上并没有在任何地方提交数据，因此您应该使用 常规option，而不是button按钮。
• 您无需设置两个单独的区域即可获得结果 出现。您可以只设置一个区域并动态设置文本 在其中以及其样式。
• 您询问设置submit与设置{ 使用onclick ... There are differences，您应该 正在使用现代的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;}