javascript - 为什么无法正确读取用户输入和选择？

Question

我一生都无法理解我在这里做错了什么。仅使用普通 JS，我试图检查用户是否在文本字段中输入了有效的数字，然后从下拉菜单中选择一个选项。

如果它们都无效，则会出现错误。如果年龄有效且下拉菜单项无效，则会出现错误。
如果下拉菜单项无效且年龄有效，则会出现错误。

正如我们所说，如果我输入有效数字并从下拉菜单中选择一个项目，我会得到插入有效数字并从下拉菜单中选择一个选项!这是完全错误的。

我做错了什么？

这是我的 HTML:

<form>
            <div>
                <label>Number
                    <input type="text" name="number">
                </label>
            </div>
            <div>
                <label>My Menu
                    <select name="menu">
                        <option value="">---</option>
                        <option value="item1">Item 1</option>
                        <option value="item2">Item 2</option>
                        <option value="item3">Item 3</option>
                    </select>
                </label>
            </div>
            <div>
                <button class="add">add</button>
            </div>
         </form>

这是我的 JS:

var addButton = document.getElementsByTagName("button")[0];
addButton.type = "button";

var numInput = +document.getElementsByTagName("input")[0].value;

var select = document.getElementsByTagName("select")[0].selectedIndex == "0";

function validation() {
    if(numInput < 0 || numInput === 0 || isNaN(numInput) && select) {
        alert("insert a valid number and choose an option from the dropdown!");
    } else {
        alert("valid number accepted!");
    }

    if(select) {
        alert("choose an option from the dropdown!");
    } else {
        alert("dropdown menu option chosen!");
    }
}

addButton.onclick = function() {
    validation();
};

Answer 1

您需要在运行validation()时获取要检查的值

function validation() {
    var numInput = +document.getElementsByTagName("input")[0].value;
    var select = document.getElementsByTagName("select")[0].selectedIndex == "0";
    if(numInput < 0 || numInput === 0 || isNaN(numInput) && select) {