JavaScript DOM操作中.again重置按钮功能失效求助

核心问题1：代码重复定义 #

你的代码完整重复了两次（从const secretNumber到.again按钮的事件监听全部复制了一遍），这会导致：

• 变量secretNumber和score被重复声明，后声明的变量会覆盖前一个，同时事件监听器被绑定两次，触发逻辑混乱
• 重置按钮的逻辑被绑定两次，执行时出现冲突

核心问题2：const变量无法重新赋值 #

secretNumber用const声明，在重置按钮的回调里尝试给它赋值secretNumber = Math.trunc(Math.random() * 20) + 1;会直接抛出语法错误，导致重置逻辑完全无法执行。需要将const secretNumber改为let secretNumber，允许变量被重新赋值。

核心问题3：语法错误（逗号误用） #

代码里多处出现document.querySelector('.number'),style.width，这里的逗号是错误的，应该改为点号.，正确写法为document.querySelector('.number').style.width。这个语法错误会导致样式修改失效，甚至中断后续代码执行。

修复后的完整代码 #

// 初始化变量，用let声明secretNumber允许重新赋值
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;

// 检查按钮逻辑
document.querySelector('.check').addEventListener('click', function () {
    const guess = Number(document.querySelector('.guess').value);

    // 无输入的情况
    if (!guess) {
        document.querySelector('.message').textContent = '❌ No Number';
    } 
    // 猜对的情况
    else if (guess === secretNumber) {
        document.querySelector('.message').textContent = '🎉 Correct Number ! ';
        document.querySelector('body').style.backgroundColor = '#60b347';
        // 修复逗号为点号
        document.querySelector('.number').style.width = '30rem';
        document.querySelector('.number').textContent = secretNumber;
    } 
    // 猜高了的情况
    else if (guess > secretNumber) {
        if (score > 1) {
            document.querySelector('.message').textContent = '📈 Too High!';
            score--;
            document.querySelector('.score').textContent = score;
        } else {
            document.querySelector('.message').textContent = '🧨 You Lost The Game!';
            document.querySelector('.score').textContent = 0;
        }
    } 
    // 猜低了的情况
    else if (guess < secretNumber) {
        if (score > 1) {
            document.querySelector('.message').textContent = '📉 Too Low!';
            score--;
            document.querySelector('.score').textContent = score;
        } else {
            document.querySelector('.message').textContent = '🧨 You Lost The Game!';
            document.querySelector('.score').textContent = 0;
        }
    }
});

// 重置按钮逻辑
document.querySelector('.again').addEventListener('click', function(){
    score = 20;
    secretNumber = Math.trunc(Math.random() * 20) + 1;

    document.querySelector('.message').textContent = 'Start Guessing...';
    document.querySelector('.score').textContent = score;
    document.querySelector('.number').textContent = '?';
    document.querySelector('.guess').value = '';

    document.querySelector('body').style.backgroundColor = '#222';
    // 修复逗号为点号
    document.querySelector('.number').style.width = '15rem';
});

额外优化说明 #

• 把游戏失败的逻辑整合到猜高/猜低的分支里，避免score减到负数（原代码中若score已为0，继续点击检查按钮会让score变成负数）
• 统一添加分号，保证代码语法规范

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