JS按钮点击事件仅执行一次 骰子随机函数重复点击失效问题

你的随机点数生成逻辑写在了game函数外的全局作用域，页面初次加载时就只执行了一次随机数计算，后续每次点击按钮触发game函数时，用的都是第一次生成的固定rand、rand2值，自然不会有更新效果。
另外原代码直接对比图片文件名字符串判断胜负的写法存在隐患，更稳妥的方式是先生成1-6的整数点数，再映射对应图片、对比点数大小判断结果。

const imgList = ["dice1.png", "dice2.png","dice3.png","dice4.png","dice5.png","dice6.png" ];
// 页面加载时一次性获取所有需要的DOM元素，避免每次点击重复查询
const dice1 = document.querySelector(".dice1"); 
const dice2 = document.querySelector(".dice2"); 
const button = document.querySelector("button"); 
const resultTitle = document.querySelector("h1"); 

function game () {
  // 每次执行函数时重新生成两个1-6区间的随机点数
  const point1 = Math.floor(Math.random() * 6) + 1;
  const point2 = Math.floor(Math.random() * 6) + 1;
  // 更新对应骰子图片，数组索引从0开始，所以点数减1取对应文件名
  dice1.src = "/images/" + imgList[point1 - 1];
  dice2.src = "/images/" + imgList[point2 - 1];

  // 根据点数对比更新胜负结果
  if (point1 > point2) {
      resultTitle.textContent = "Player 1 WIN"
  } else if (point2 > point1) {
      resultTitle.textContent = "Player 2 WIN"
  } else {
      resultTitle.textContent = "EQUALS"
  }
}

// 绑定按钮点击事件
button.addEventListener("click", game);

• 把随机值生成逻辑移到game函数内部，保证每次点击按钮都会生成全新的骰子点数，触发界面更新
• 将DOM元素查询逻辑移到全局作用域，仅在页面加载时执行一次，减少不必要的性能开销
• 改用1-6的整数点数做胜负判断，从根源上避免字符串比较可能出现的逻辑错误
• 删除了原代码中永远不会触发的冗余else分支，简化点击事件绑定写法，直接传入函数引用即可

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