HTML游戏结局选择页面：if语句与input交互失效修复咨询

核心问题分析 #

• 输入框内容获取错误：<input>元素的内容需通过value属性获取，而非innerHTML/textContent
• 变量未实时更新：原代码中choose仅在页面加载时获取一次值，后续输入不会更新该变量
• 轮询方式不合理：用setInterval轮询既浪费性能又没必要，应改用事件监听
• 类型不匹配：输入内容是字符串类型，直接与数字1-9比较会出现匹配失败

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
    <script>
        function checkChoice() {
            // 获取输入框当前值并转为数字
            const choose = Number(document.getElementById("choice").value);
            // 判断输入是否在1-9范围内
            if (choose >= 1 && choose <= 9) {
                // 后续可根据choose值修改为对应结局页面，例如`${choose}.html`
                window.location.href = "1:1:1.html";
            }
        }

        // 页面加载完成后绑定事件
        window.onload = function() {
            const input = document.getElementById("choice");
            // 监听回车键提交
            input.addEventListener("keydown", function(e) {
                if (e.key === "Enter") {
                    checkChoice();
                }
            });
        }
    </script>
</head>
<body>
    <form>
        <label for="choice">输入1-9跳转对应结局</label><br>
        <input type="text" id="choice" name="choice" class="choice"><br>
        <!-- 可选：添加提交按钮提升交互体验 -->
        <button type="button" onclick="checkChoice()">确认跳转</button>
    </form>
</body>
</html>

额外优化建议 #

• 可将输入框类型改为number，限制仅能输入数字：<input type="number" min="1" max="9">
• 若后续每个结局对应不同页面，可通过模板字符串动态生成跳转路径，比如window.location.href = ${choose}.html``
• 避免无意义的轮询逻辑，事件监听是更高效的交互触发方式

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