JavaScript猜数字游戏无法获取用户输入该如何解决？

核心问题说明 #

• window.alert()仅用于弹出提示信息，不支持用户输入，也不会返回任何有效输入值，这是你无法获取用户猜测内容的核心原因。
• 前端获取用户简单输入可以用window.prompt()，如果需要更好的交互体验可以在HTML中添加输入框和提交按钮。
• window.prompt()返回的是字符串类型的内容，需要转换为数字类型后才能和随机生成的数字做正确对比。

最简修改方案（直接调整现有JS代码即可） #

把你原有JS代码里的alert替换为prompt，再加上类型转换即可：

// 用prompt弹出输入框，获取用户输入后转成数字
var number = Number(window.prompt("请输入1到10之间的数字："));
var random = Math.floor(Math.random() * 10) + 1;

if (random === number) {
    document.write("你猜对了！答案是：" + random);
} else {
    document.write("你猜错了，正确答案是：" + random);
}

体验优化方案（带输入框和按钮） #

如果不想用弹窗输入，可以修改HTML加入交互元素：

修改后的HTML代码 #

<!DOCTYPE html>
<html>
<body>
    <h2>猜数字游戏！</h2>
    <p>系统会随机生成1到10之间的数字，请输入你的猜测：</p>
    <input type="number" id="guessInput" min="1" max="10" placeholder="请输入1-10的数字">
    <button onclick="checkGuess()">提交猜测</button>
    <p id="result"></p>
    <script src="RandomNumberMaker.js"></script>
</body>
</html>

对应的JS代码 #

// 页面加载时先生成随机数
var random = Math.floor(Math.random() * 10) + 1;

function checkGuess() {
    // 获取输入框的值转成数字
    var number = Number(document.getElementById('guessInput').value);
    var resultDom = document.getElementById('result');
    // 校验输入合法性
    if (isNaN(number) || number < 1 || number > 10) {
        resultDom.textContent = '请输入1到10之间的有效数字！';
        return;
    }
    if (random === number) {
        resultDom.textContent = `恭喜你猜对了！答案就是${random}`;
    } else {
        resultDom.textContent = `你猜错了，正确答案是${random}，刷新页面可以再玩一次~`;
    }
}

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