如何实现innerHTML显示随机数并验证输入匹配？代码修复求助

核心问题分析 #

你的代码存在两个关键问题导致功能失效：

1. 随机数生成时机错误：每次点击按钮时，先获取用户输入，再生成新的随机数，这意味着你拿用户输入和刚生成的新数对比，而非页面上显示的那个数，永远无法匹配。
2. 类型不匹配：输入框的值是字符串类型，随机数是数字类型，虽然==会隐式转换，但显式处理能避免潜在问题。

修复方案（最小改动） #

我们只需要调整随机数的生成时机，把它放在页面加载时初始化，并存在全局变量中，点击按钮时仅做验证逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math Facts</title>
</head>
<body>
    <p id="problem"></p>
    <input id="text_a" type="text" />
    <p id="answer"></p>
    <button onclick="myFunction()">Check</button>
    
    <script>
    // 页面加载时生成随机数并显示
    var num = Math.floor(Math.random()*11);
    document.getElementById("problem").innerHTML = num;

    function myFunction() {
        // 获取用户输入并转为数字
        const a = parseInt(document.getElementById("text_a").value);
        if (a === num) {
            document.getElementById("answer").innerText = "Correct!";
            // 验证成功后自动生成新的随机数并清空输入框
            num = Math.floor(Math.random()*11);
            document.getElementById("problem").innerHTML = num;
            document.getElementById("text_a").value = "";
        } else {
            document.getElementById("answer").innerHTML = "Oops!";
        }
    }
    </script>
</body>
</html>

改动说明 #

• 把随机数num设为全局变量，页面加载时就生成并显示在<p>标签中
• 获取用户输入时用parseInt()转为数字，用===做严格相等判断
• 验证成功后自动生成新随机数并清空输入框，优化用户体验

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