JavaScript随机乘法答题程序不显示题目、无对错反馈问题解决

定位到的具体问题（对应你遇到的两个异常现象） #

• 弹框不显示乘法题目：prompt() 仅支持两个入参：一是弹框提示文本，二是输入框默认值，额外传入的参数会被浏览器直接忽略。你当前调用prompt时传入了4个参数，仅第一个字符串会被展示，后面的随机数、乘号完全不会出现在弹框里，自然看不到完整题目。
• 无有效用户反馈：所有答对、答错、次数耗尽的提示都写在了console.log里，普通用户访问页面不会主动打开浏览器控制台，根本看不到这些输出。另外脚本末尾单独写的console.log(myFunctions)仅会把函数本身的代码打印到控制台，完全不会触发答题逻辑。
• 循环逻辑存在死循环风险：
  • 循环判断条件引用的attempts变量是在循环体内部声明的，初始值为undefined，首轮判断存在逻辑隐患
  • 尝试次数达到上限后，代码仅打印日志，没有主动跳出while循环，程序会无限弹出prompt窗口
  • 未处理用户点击prompt取消、输入非数字的异常场景，会导致判断逻辑失效

修复后的完整可运行代码 #

<!DOCTYPE html>
<html>
  <body>
    <p>点击按钮开始乘法答题，两个乘数范围为1-100，最多可尝试5次</p>
    <button onclick="startQuiz()">开始答题</button>
    <p id="demo"></p>
    <script>
      function startQuiz() {
        // 生成1-100范围的随机整数
        const num1 = Math.floor(Math.random() * 100 + 1);
        const num2 = Math.floor(Math.random() * 100 + 1);
        const correctAnswer = num1 * num2;
        const maxAttempt = 5;
        let currentAttempt = 0;
        let userInput = null;

        // 基于尝试次数控制循环，避免死循环
        while (currentAttempt < maxAttempt) {
          currentAttempt += 1;
          // 拼接完整题目到prompt的提示参数中
          userInput = prompt(
            `请计算下面乘法的结果（第${currentAttempt}次尝试，剩余${maxAttempt - currentAttempt + 1}次机会）：\n${num1} × ${num2} = ?`
          );

          // 处理用户点击取消的场景
          if (userInput === null) {
            document.getElementById('demo').innerText = '答题已取消';
            break;
          }

          // 转换为数字类型做有效性校验
          const userAnswer = Number(userInput.trim());
          if (isNaN(userAnswer)) {
            document.getElementById('demo').innerText = '请输入有效数字，本次尝试无效';
            continue;
          }

          // 答对反馈
          if (userAnswer === correctAnswer) {
            document.getElementById('demo').innerText = `回答正确！正确结果为${correctAnswer}，共尝试${currentAttempt}次`;
            break;
          } 
          // 答错但仍有剩余机会的反馈
          else if (currentAttempt < maxAttempt) {
            document.getElementById('demo').innerText = `回答错误，你还剩${maxAttempt - currentAttempt}次机会，请重试`;
          }
          // 尝试次数耗尽的反馈
          else {
            document.getElementById('demo').innerText = `5次尝试已用完，正确结果为${correctAnswer}`;
          }
        }
      }
    </script>
  </body>
</html>

修复点说明 #

• 将乘法题目拼接为完整字符串传入prompt()的第一个参数，弹框内会完整展示题目和剩余尝试次数
• 所有用户反馈直接写入页面的#demo元素，无需打开控制台即可看到结果
• 循环判断逻辑改为基于累计尝试次数控制，避免死循环，同时兼容用户点取消、输入非数字的边界场景
• 移除无实际作用的函数打印代码，点击按钮即可正常启动答题流程

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