求助：JS骰子游戏全局变量无法获取点击事件内赋值的数值

为什么console.log输出undefined？ #

console.log(a)和console.log(b)是页面加载时立即执行的，而变量a、b的赋值逻辑是在点击事件触发后才会运行。事件监听器属于异步触发逻辑，页面初始化阶段用户还没点击骰子，此时变量只是被声明但未赋值，自然输出undefined。

另外你第二版代码存在明显错误：给image1重复绑定了两次点击事件，而非给image2绑定，这会导致点击玩家1的骰子时同时修改两个骰子的图片，需要修正。

修正后的完整实现代码 #

HTML和CSS部分可保留原代码，以下是完善后的JavaScript代码，实现点击骰子生成随机数、判断胜负并统计得分的功能：

// 生成1-6的随机骰子点数
function randomNumber() {
  return Math.floor(Math.random() * 6) + 1;
}

// 全局变量存储玩家总得分与当前回合点数
let player1Score = 0;
let player2Score = 0;
let player1Current = 0;
let player2Current = 0;

// 获取DOM元素
const image1 = document.querySelector(".img1");
const image2 = document.querySelector(".img2");
const title = document.querySelector("h1");
const player1Label = document.querySelector(".dice:first-child p");
const player2Label = document.querySelector(".dice:last-child p");

// 玩家1点击骰子事件
image1.addEventListener('click', () => {
  player1Current = randomNumber();
  image1.src = `/images/dice${player1Current}.png`;
  checkRoundResult();
});

// 玩家2点击骰子事件
image2.addEventListener('click', () => {
  player2Current = randomNumber();
  image2.src = `/images/dice${player2Current}.png`;
  checkRoundResult();
});

// 判断回合胜负、更新得分与页面显示
function checkRoundResult() {
  // 确保两个玩家都完成本轮点击
  if (player1Current !== 0 && player2Current !== 0) {
    if (player1Current > player2Current) {
      title.textContent = "Player 1 Wins!";
      player1Score++;
    } else if (player2Current > player1Current) {
      title.textContent = "Player 2 Wins!";
      player2Score++;
    } else {
      title.textContent = "Draw!";
    }

    // 更新玩家得分显示
    player1Label.textContent = `Player 1 (Score: ${player1Score})`;
    player2Label.textContent = `Player 2 (Score: ${player2Score})`;

    // 重置当前回合点数，准备下一轮
    player1Current = 0;
    player2Current = 0;
  }
}

关键修改说明 #

1. 逻辑封装：将胜负判断逻辑抽离到checkRoundResult函数，每次玩家点击后调用，确保两个玩家都完成操作后再进行胜负判定。
2. 语义化变量：替换原无意义的a、b，改用player1Current、player2Score等语义化变量，提升代码可读性。
3. 得分统计：新增总得分变量，每次回合结束后更新得分并同步到页面显示。
4. 修复绑定错误：给image2绑定正确的点击事件，避免重复触发image1的逻辑。

调试技巧 #

如果需要查看变量值，不要在页面初始化时打印，而是将console.log放在事件回调内，比如：

image1.addEventListener('click', () => {
  player1Current = randomNumber();
  image1.src = `/images/dice${player1Current}.png`;
  console.log("玩家1当前点数:", player1Current);
  checkRoundResult();
});

这样每次点击后都会在控制台输出当前数值，方便调试。

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