点击按钮时如何用JavaScript正确获取显示HTML输入框的用户输入值

返回[object HTMLInputElement]是典型的取值逻辑错误：

• 代码里直接写ans1时，本质拿到的是id为ans1的整个输入框DOM对象，不是用户输入的文本内容。把DOM对象直接插入页面HTML时，对象默认转字符串的结果就是[object HTMLInputElement]。
• input这类表单元素的用户输入内容，存储在DOM元素的value属性上，代码没有读取这个属性，自然拿不到用户填进去的值。
• 额外bug：给Cancel按钮绑定了Clear()函数但没有写实现，点击时会直接抛出JS错误。

按照标准DOM操作逻辑修改即可，核心是拿到输入框元素后读取它的value属性，修复后的完整可运行代码如下：

<body>
<p>8 + 7 = ....</p>
<input type="text" name="ans" id="ans1" placeholder="Enter your answer here">
<button type="button" onclick="Game()">OK</button>
<button type="button" onclick="Clear()">Cancel</button>
<br><br>

<h1>A Simple Math Game</h1>
<p>
    <strong>Question 1</strong>
    <span id="question1"></span>
    <span id="answer1"></span>
    <span id="feedback"></span>
</p>

<script>
    document.getElementById("question1").innerHTML = "8 + 7 = ...";
    function Game() {
        // 标准方式获取输入框元素，读取value属性拿到用户输入
        const userInput = document.getElementById("ans1").value;
        // 把输入值渲染到对应展示区域
        document.getElementById("answer1").innerHTML = userInput;
        
        // 可选扩展：增加答案对错判断
        const feedback = document.getElementById("feedback");
        if (Number(userInput) === 15) {
            feedback.innerHTML = " 回答正确！";
        } else {
            feedback.innerHTML = " 回答错误，正确答案是15";
        }
    }

    // 补全缺失的清空重置函数
    function Clear() {
        document.getElementById("ans1").value = "";
        document.getElementById("answer1").innerHTML = "";
        document.getElementById("feedback").innerHTML = "";
    }
</script>
</body>

• 不要依赖浏览器“id名直接作为全局变量”的非标准特性，统一用document.getElementById()获取DOM元素，兼容性更好也不容易出现隐式bug
• 所有input、textarea这类表单元素的用户输入内容，都要通过元素的value属性读取，直接操作元素本身只能拿到DOM对象
• 元素上绑定的事件函数一定要提前实现，不然点击触发时会抛错中断后续逻辑

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