如何用JavaScript将掷骰子函数结果存入数组并统计各点数出现次数

你无需修改原有HTML代码，只需替换JS代码即可实现需求，完整修改后的JS代码如下：

let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

function rollDice() {
  let dice0 = document.getElementById("dice0");
  let dice1 = document.getElementById("dice1");
  let result = document.getElementById("result");
  let listDom = document.getElementById("list");
  // 生成随机点数
  let d0 = Math.floor(Math.random() * 6) + 1;
  let d1 = Math.floor(Math.random() * 6) + 1;
  let total = d0 + d1;
  // 更新对应点数的统计次数
  results[total]++;
  // 渲染单次掷骰结果
  dice0.textContent = d0;
  dice1.textContent = d1;
  result.textContent = `You rolled ${total}.`;
  // 渲染全量统计列表
  let listHtml = '';
  for (let point = 2; point <= 12; point++) {
    listHtml += `你掷出点数${point}共${results[point]}次<br>`;
  }
  listDom.innerHTML = listHtml;
}

关键逻辑说明 #

• 利用results数组下标和两个骰子点数和的对应关系，直接通过results[total]++更新对应点数的出现次数，前两位为null的项会被自动跳过，无需额外判断
• 每次掷骰完成后遍历2~12的点数范围，拼接统计文本渲染到页面的list容器中，每次点击按钮都会刷新最新的统计结果

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