JavaScript骰子游戏winner获胜函数未正常触发问题求解

故障核心原因 #

• 获胜判定代码写在了rollDice()函数外部：这段判断逻辑只会在页面初次加载时执行1次，此时双方分数均为0，永远无法触发获胜条件；后续每次点击掷骰按钮仅会执行rollDice内部的逻辑，根本不会走到获胜判断分支。
• 按钮变量赋值错误：原代码把addEventListener的返回值（固定为undefined）赋给了rollBtn变量，后续winner函数里操作rollBtn.style时会直接报JS错误，就算触发了获胜逻辑也无法正常执行UI切换。
• 逻辑顺序混乱：原代码先切换玩家回合再判断胜负，会出现玩家刚达到获胜分数、回合先切到对方的异常表现；同时代码中混入了大量未加注释标识的零散纯文本，会触发语法报错。

修复方案 #

1. 拆分按钮DOM获取和事件绑定逻辑，先拿到按钮DOM元素存入变量，再绑定点击事件
2. 把获胜判定逻辑移到rollDice函数内部，放在分数更新、UI渲染完成之后，切换回合之前
3. 触发获胜逻辑后直接终止函数执行，不再运行后续切换回合的代码
4. 删除代码中无意义的零散纯文本，避免语法错误

修复后完整JS代码 #

let player1Score = 0
let player2Score = 0
let player1Turn = true

const player1Dice = document.getElementById("player1Dice")
const player2Dice = document.getElementById("player2Dice")
const player1Scoreboard = document.getElementById("player1Scoreboard")
const player2Scoreboard = document.getElementById("player2Scoreboard")
const message = document.getElementById("message")
// 先获取DOM元素，再绑定事件
const rollBtn = document.getElementById("rollBtn")
const resetBtn = document.getElementById("resetBtn")
rollBtn.addEventListener("click", rollDice)

function winner(){
    rollBtn.style.display = "none"
    resetBtn.style.display = "block"
}

function rollDice(){
    let diceRoll = Math.floor(Math.random()*6) + 1;
    if (player1Turn) {
        player1Score += diceRoll;
        player1Dice.textContent = diceRoll;
        player1Scoreboard.textContent = player1Score;
        player1Dice.classList.remove("active");
        player2Dice.classList.add("active");
        // 玩家1加分后先判断是否获胜
        if (player1Score >= 20) {
            message.textContent = "Player 1 has won! 🥳"
            winner()
            return
        }
        message.innerText = "Player 2 turn";
    } else {
        player2Score += diceRoll;
        player2Dice.textContent = diceRoll;
        player2Scoreboard.textContent = player2Score;
        player2Dice.classList.remove("active");     
        player1Dice.classList.add("active");
        // 玩家2加分后先判断是否获胜
        if (player2Score >= 20) {
            message.textContent = "Player 2 has won! 🎉"
            winner()
            return
        }
        message.innerText = "Player 1 turn";
    }
    // 无人获胜才切换回合
    player1Turn = !player1Turn
}

注：目前重置按钮的点击逻辑尚未实现，可自行给resetBtn绑定点击事件，在事件内将双方分数重置为0、更新计分板、恢复掷骰按钮显示、隐藏重置按钮、切回玩家1回合即可。

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