JavaScript中onclick执行后start变量无法维持true状态的问题求助

核心问题分析 #

1. 变量作用域冲突：你在start_game.onclick函数里用var start = true;重新声明了局部变量，这会覆盖全局的start变量，导致全局的start始终保持初始的false状态。
2. 事件绑定时机错误：页面加载时就执行了if (start == true)的判断，此时start是false，所以left_button的点击事件根本没有绑定成功——就算后续修改了start的值，这段绑定逻辑也不会再重新执行。

修复后的代码 #

const left_button = document.getElementById("left")
const right_button = document.getElementById("right")
const start_game = document.getElementById("start-game");
// 注意：这里空ID的变量获取不到任何元素，要么填上正确ID要么删除
// const start_game_button = document.getElementById("");
const player_1_name = document.getElementById("player1");
const player_2_name = document.getElementById("player2");
const score1 = document.getElementById("score1");
const score2 = document.getElementById("score2");
let start = false; // 用let替代var，符合现代JS规范

score1.style.display = "none";
score2.style.display = "none";

start_game.onclick = function(){
    const p1Name = prompt("Name of Player One: ");
    const p2Name = prompt("Name of Player Two: ");
    // 处理用户取消输入的情况
    if (p1Name && p2Name) {
        player_1_name.textContent = p1Name;
        player_2_name.textContent = p2Name;
        start_game.style.display = "none";
        score1.style.display = "block"; // 明确设置display值，避免依赖默认行为
        score2.style.display = "block";
        start = true; // 直接修改全局变量，不要重新声明
    }
}

// 绑定点击事件到按钮上，在事件内部判断start状态
left_button.onclick = function(){
    if (start) {
        alert("test");
    }
}

优化建议 #

• 优先使用let/const替代var：var存在变量提升、作用域模糊的问题，现代JS推荐用let声明可变变量，const声明不可变变量。
• 处理输入边界：prompt会在用户点击取消时返回null，建议判断输入有效后再执行后续逻辑，避免空名称显示。
• 用textContent代替innerHTML：如果只是设置纯文本内容，textContent更安全（避免XSS风险），性能也更好。
• 清理无效代码：const start_game_button = document.getElementById("");这段代码无法获取到元素，要么补充正确的ID，要么直接删除。
• 明确样式值：不要用score1.style.display = ""，最好明确设置为"block"/"flex"等具体值，避免浏览器默认行为不一致。

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