如何将输入框数值存入变量并在按钮点击事件中实现奇偶判断？

你的代码里直接用value无法正确获取输入框内容，得先定位到输入框元素，再把它的值转换成数字类型才能进行计算。下面是修正后的完整代码，还加了输入验证避免非法值：

<!DOCTYPE html>
<html>
<head>
    <title>奇偶判断器</title>
</head>
<body>
    <h1>输入0-20之间的整数</h1>
    <p>
        <input type="number" id="myNum" name="myNum" min="0" max="20">
        <p>
            <button style="background-color: rgb(68, 68, 68); 
            border-color: black; 
            color:white; 
            border-radius: 5px; 
            border-width: 5px;" onclick="checkOddEven()">
                判断奇偶
            </button>
        </p>
        <div id="oddoreven"></div>
    </p>

    <script>
        function checkOddEven() {
            // 获取输入框DOM元素
            const inputBox = document.getElementById('myNum');
            // 将输入的字符串转为数字
            const number = Number(inputBox.value);
            
            // 验证输入是否符合要求
            if (isNaN(number) || number < 0 || number > 20 || !Number.isInteger(number)) {
                document.getElementById('oddoreven').innerHTML = '请输入0-20之间的整数';
                return;
            }
            
            // 判断奇偶并输出结果
            if (number % 2 === 0) {
                document.getElementById('oddoreven').innerHTML = '这个数是偶数';
            } else {
                document.getElementById('oddoreven').innerHTML = '这个数是奇数';
            }
        }
    </script>
</body>
</html>

关键修改说明： #

• 把按钮的内联逻辑抽成独立函数checkOddEven，代码更清晰易维护
• 用document.getElementById('myNum')获取输入框元素，通过value属性拿到输入内容后，用Number()转为数字类型（输入框默认返回字符串，直接取模会出错）
• 增加输入验证：检查是否为有效数字、是否在0-20范围内、是否为整数，避免用户输入错误内容导致逻辑异常
• 修正原HTML语法错误：比如<DOCTYPE html>应为<!DOCTYPE html>，无效标签<p1>替换成标准的<p>

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