JavaScript六面骰子程序作业求助：掷6规则及结果留存问题

先帮你拆解两个核心问题，再给出优化后的代码示例：

一、掷出6的逻辑处理是否正确？ #

你的核心逻辑方向是对的，但有几个细节需要调整完善：

• 变量类型问题：你从输入框获取的numDice是字符串类型，直接赋值给diceThrows会导致后续数值计算出错，需要先转成数字：let diceThrows = parseInt(numDice, 10);
• 提示信息覆盖问题：当前每次掷出6时，msg的内容会被覆盖，如果多次掷出6，用户只会看到最后一次的提示。可以改成追加提示的方式，比如：document.getElementById("msg").innerHTML += "<br>You got a 6 and two new dice were thrown";
• 变量声明规范：循环里的var diceRoll存在变量提升问题，建议改成let diceRoll，避免作用域混乱。
• 整体逻辑上，你做到了掷出6时不计入总和、额外添加2个骰子的要求，这部分是符合作业规则的。

二、如何实现每次调用rollDice()时不重置之前的结果？ #

要保留之前的累计结果，需要把总和和总掷骰次数这两个状态变量放在函数外部（不要在rollDice内部重新初始化），同时不要清空骰子容器的内容：

1. 在rollDice函数外面定义全局状态变量，用来保存累计数据：

   let totalSum = 0;
   let totalThrowsCount = 0;
   

2. 移除初始代码里的container.innerHTML = "";，这样每次掷骰的结果会追加显示，而不是清空之前的内容。
3. 在每次掷骰时，更新累计的总和和总次数，而非每次都重新初始化sum。

优化后的完整代码示例 #

// 全局状态变量，保存累计结果和总掷骰次数
let totalSum = 0;
let totalThrowsCount = 0;

function rollDice() { 
  const numDiceInput = document.getElementById("diceNum").value;
  const numDice = parseInt(numDiceInput, 10);
  const container = document.getElementById("dieContainer");
  const msgElement = document.getElementById("msg");

  // 验证输入有效性
  if (isNaN(numDice) || numDice < 1 || numDice > 5) { 
    window.alert('Input not valid'); 
    container.style.display = "none";
    return; // 验证不通过直接退出函数，避免后续执行
  } 
  container.style.display = "block";

  let diceThrows = numDice; 
  while(diceThrows > 0) { 
    const diceRoll = Math.floor(Math.random() * 6) + 1; 
    totalThrowsCount++; // 更新总掷骰次数

    if(diceRoll === 6) { 
      diceThrows += 2; 
      msgElement.innerHTML += "<br>You got a 6 and two new dice were thrown"; 
    } else { 
      totalSum += diceRoll; 
    } 

    // 追加骰子显示
    container.innerHTML += `<div class="dice">${diceRoll}</div>`; 
    diceThrows -= 1; 
  }

  // 更新最终累计结果展示
  msgElement.innerHTML += `<br>累计总和: ${totalSum} | 总掷骰次数: ${totalThrowsCount}`;
}

额外说明 #

• 我把变量都改成了const或let，符合现代JavaScript语法规范，避免var的作用域问题。
• 增加了return语句在验证不通过时退出函数，减少不必要的代码执行。
• 提示信息采用追加方式，用户可以看到所有掷出6的提示，以及完整的累计结果。

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