输入数字2时onchange事件未触发alert弹窗的JS问题求助

我一眼就看到了几个导致onchange事件没触发alert的问题，咱们一个个来解决：

1. 错误获取输入值 #

你当前代码里的x是DOM元素对象，不是输入框的实际值！直接拿它和数字2比较肯定永远不相等，得用.value属性获取输入的内容：

var x = document.getElementById("partysize").value;

2. 类型不匹配问题 #

输入框的值默认是字符串类型，比如你输入2，拿到的是"2"（带引号的字符串），和数字2比较时，虽然==会做隐式转换，但更严谨的做法是要么转成数字，要么直接和字符串"2"比较：

• 转数字的写法：

var x = parseInt(document.getElementById("partysize").value);
if (x === 2) { ... }

• 直接字符串比较：

var x = document.getElementById("partysize").value;
if (x === "2") { ... }

3. 确认事件绑定是否正确 #

别忘了在你的<input>标签上绑定onchange事件，比如：

<input type="number" id="partysize" onchange="myFunction()">

完整修复后的代码 #

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <script type="text/javascript">
        function myFunction() {
            var x = parseInt(document.getElementById("partysize").value);
            if (x === 2) {
                window.alert("You entered " + x);
            }
        }
    </script>
</head>
<body>
    <input type="number" id="partysize" onchange="myFunction()">
</body>
</html>

这样修改后，当你在数字输入框输入2并离开输入框时，就会触发alert提示啦！

内容的提问来源于stack exchange，提问作者Sammy7