时间戳

首页 > 解决方案 > 为什么它不能识别我的下拉菜单中的无效选择？

javascript - 为什么它不能识别我的下拉菜单中的无效选择？

问题描述

如果他们决定不使用严格的 vanilla JS 从下拉菜单中选择一个项目，我会尝试向用户显示一条消息。相反，我在控制台中收到一个错误，显示cannot read property 'selectedIndex' of null. 我看不出我做错了什么。

我该如何解决这个问题？

这是HTML：

        <form>
            <div>
                <label>Drop Down Menu
                    <select name="menu">
                        <option value="">---</option>
                        <option value="item1">Item 1</option>
                        <option value="item2">Item 2</option>
                    </select>
                </label>
            </div>
          </form>

这是JS：

var myForm = document.getElementsByTagName("form");
myForm.id = "the-form";

var submitButton = document.getElementsByTagName("button")[1];
submitButton.id = "submit-button";

function formValidation() {    
    var select = document.getElementsByTagName("select");
    select.id = "myMenu";

    var selectId = document.getElementById("myMenu");
    if(selectId.selectedIndex <= 0) {
        console.log("a menu item must be selected!");
    }

    alert("Chosen!");
}

submitButton.onclick = myForm.onsubmit = function() {
    formValidation();
};

标签： javascripthtmldebugging

解决方案

您在此处通过“myMenu”的 id 定位 DOM 节点：

 var selectId = document.getElementById("myMenu");

而您要定位的选择具有 ID“菜单”。因此，您必须更改 JS 选择中的 id 或 html 中选择的 id。

推荐阅读