Question

如果用户决定不严格使用原始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();
};

Answer 1

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

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

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

Answer 2

由于getElementsByTagName将返回一个Array，因此您可以定位Array的第一个元素（这是您的菜单）

function checkValidation(){
  if(document.getElementsByTagName("select")[0].selectedIndex == "0"){
    console.log("INVALID!");
  }
  else{
    console.log("VALID!")
  }
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script src="script.js"></script>
    <select>
        <option>---</option>
        <option>Item 1</option>
        <option>Item 2</option>
    </select>
    <button onclick="checkValidation()">check validation</button>
  </body>
</html>

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

2 个答案: