JS实现掷骰子功能时按钮仅首次点击生效需刷新才可复用问题求助

问题根因 #

你代码中的随机数生成逻辑仅在页面首次加载时执行了一次，全局变量x、y的值在页面加载完成后就固定不变，后续每次点击按钮调用rollDice函数，都是返回固定的x+y结果，所以你会觉得点击没有响应——实际上事件已经正常触发了，只是每次展示的内容完全一致，看起来像没有生效。

修正后的JS代码 #

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

// 每次调用都生成新的1-6随机骰子点数
function rollDie(){
   return Math.floor(Math.random() * 6) + 1
}

function rollDice(){
  // 每次掷骰子都生成两个全新的点数再求和
  const x = rollDie()
  const y = rollDie()
  return x + y
}

const rollBtn = document.getElementById("roll")
rollBtn.addEventListener('click',() => {
  const k = rollDice();
  document.getElementById("result").innerHTML= `You rolled a ${k}!`
  // 如果需要统计各点数出现次数，可以在这里加计数逻辑
  results[k]++
})

console.log(rollDice());

主要修改点 #

• 移除了全局定义的x、y变量，把随机数生成逻辑移到rollDie函数内部，保证每次调用都能得到新的点数
• rollDice函数每次执行时都会生成两个新的骰子点数再求和，避免返回固定结果
• 移除了无意义的throwDice变量：addEventListener本身没有返回值，不需要赋值给变量

修改后每次点击按钮都会生成新的骰子点数，不会再出现点击无响应的问题。

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