运行Higher-Lower游戏JS文件时prompt未定义错误的解决方法

错误原因 #

prompt()是浏览器环境专属的API，Node.js是服务器端运行环境，不存在这个全局方法。你的代码是为浏览器编写的前端脚本，直接用Node.js执行JS文件必然报错。

解决方案 #

1. 正确运行方式 #

直接在浏览器中打开你的HTML文件，浏览器会自动加载并执行关联的HigherLowerEnhanced.js，此时prompt()就能正常工作。

2. 修正代码中的其他Bug #

原代码还有几处细节错误，一起修正才能满足开发需求：

• HTML输入框ID是userInput，但JS中错误使用document.getElementById("guess")获取值，需匹配正确ID
• prompt()返回字符串，需先转为数字再判断是否为整数
• HTML中popper.js的CDN拼写错误（cloudfare改为cloudflare）
• 非数字提示消息需和需求一致，改为"That is not a number!"
• HTML中列类名错误（cold-md-6改为col-md-6）

修正后的JavaScript代码

let maxNumber;

// 循环验证用户输入的最大数字
while (true) {
    maxNumber = prompt("What should the maximum number be?");
    // 先转为数字再验证
    maxNumber = Number(maxNumber);
    
    if (isNaN(maxNumber)) {
        continue;
    }

    // 小数直接取整
    if (!Number.isInteger(maxNumber)) {
        maxNumber = Math.round(maxNumber);
    }

    if (maxNumber < 1) {
        alert("Please Enter number more than 0");
        continue;
    }

    // 更新页面上的最大数字显示
    const maxNumberSpan = document.querySelector('.max-number');
    maxNumberSpan.innerHTML = maxNumber;
    break;
}

// 生成1到maxNumber之间的随机数
let num = Math.floor(Math.random() * maxNumber) + 1;

// 存储用户有效猜测的数组
const inputArray = [];

// 绑定按钮点击事件
document.querySelector('.btn').addEventListener("click", (e) => {
    e.preventDefault();
    do_guess();
});

function do_guess() { 
    let message = document.getElementById("message"); 
    // 获取正确的输入框值
    let guess = Number(document.getElementById("userInput").value); 

    // 验证：非数字
    if (isNaN(guess)) { 
        message.innerHTML = "That is not a number!"; 
        return; 
    }

    // 验证：超出范围
    if (guess < 1 || guess > maxNumber) { 
        message.innerHTML = "That number is not in range, try again."; 
        return; 
    }

    // 验证：已猜过该数字
    if (inputArray.indexOf(guess) !== -1) {
        message.innerHTML = "You already have tried this number";
        return;
    }

    // 记录有效猜测
    inputArray.push(guess); 

    // 判断猜测结果
    if (guess === num) { 
        message.innerHTML = `You got it! It took you ${inputArray.length} tries and your guesses were ${inputArray.join(', ')}`;
    } else if (guess > num) { 
        message.innerHTML = "No, try a lower number.";
    } else { 
        message.innerHTML = "No, try a higher number.";
    }
}

修正后的HTML代码

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

        <title>Higher - Lower</title>

    </head>
    <body>
      <div class="container">
            <h1>Higher Lower</h1>
            <p>Guess a number between 1 and <span class="max-number">N</span></p>
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <form>
                        <div class="form-group">
                            <label>Your guess:</label>
                            <input type="text" id="userInput" class="form-control">
                        </div>
                        <button type="button" class="btn btn-primary" onclick="do_guess()">Guess</button>
                     </form>
                </div>
             </div>
             <p id="message"></p>
        </div>
        <script src="HigherLowerEnhanced.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </body>
 </html>

总结 #

• 前端浏览器脚本不能用Node.js运行，直接用浏览器打开HTML文件即可解决prompt未定义的错误
• 修正代码中的ID匹配、CDN拼写、数字验证逻辑等问题后，即可完全满足开发需求

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