多按钮场景下的条件语句编写问题

你的代码存在两个核心问题，导致无法正确区分正确按钮：

• 变量混淆与判断逻辑错误：在点击事件回调里重新定义的button/button2等布尔变量，和你之前创建的DOM按钮元素完全无关；而且用i === true判断完全不成立——i是DOM按钮对象，永远不可能等于布尔值true，所以所有点击都会走else分支触发alert。
• 闭包变量陷阱：for...of循环里的i是共享变量，当点击事件触发时，i已经指向最后一个按钮，即便逻辑正确也无法匹配到目标按钮。

修正方案（两种可选） #

方案1：用dataset标记正确按钮

创建按钮时给正确按钮添加自定义属性，点击时读取该属性判断：

function startGame() {
    quiz.innerHTML = "<h1>Choose the tag that corresponds with <br> the definition of an empty tag</h1>";
    startBtn.innerHTML = "";

    // 统一管理按钮文本和正确状态
    const buttonConfigs = [
        { text: "The p tag", isCorrect: false },
        { text: "The nav tag", isCorrect: false },
        { text: "The img tag", isCorrect: true },
        { text: "The h1 tag", isCorrect: false }
    ];

    buttonConfigs.forEach(config => {
        const button = document.createElement("button");
        button.textContent = config.text;
        button.setAttribute("style", "background-color: black; color: white; font-size: 20px; width: 100px; margin: 5px;");
        // 用dataset标记是否为正确选项
        button.dataset.isCorrect = config.isCorrect;
        button.addEventListener("click", function() {
            if (this.dataset.isCorrect === "true") {
                prompt("hello");
            } else {
                alert("hello");
            }
        });
        questionBtn.appendChild(button);
    });
}

方案2：创建时直接绑定对应逻辑

在循环创建按钮时，直接根据是否正确绑定不同的点击回调，逻辑更直观：

function startGame() {
    quiz.innerHTML = "<h1>Choose the tag that corresponds with <br> the definition of an empty tag</h1>";
    startBtn.innerHTML = "";

    const buttonInfo = [
        { text: "The p tag", action: () => alert("hello") },
        { text: "The nav tag", action: () => alert("hello") },
        { text: "The img tag", action: () => prompt("hello") },
        { text: "The h1 tag", action: () => alert("hello") }
    ];

    buttonInfo.forEach(info => {
        const button = document.createElement("button");
        button.textContent = info.text;
        button.setAttribute("style", "background-color: black; color: white; font-size: 20px; width: 100px; margin: 5px;");
        button.addEventListener("click", info.action);
        questionBtn.appendChild(button);
    });
}

说明 #

方案1更灵活，适合后续需要动态修改正确选项的场景；方案2逻辑直接绑定到按钮上，代码可读性更高。两者都彻底解决了原代码的变量混淆和闭包问题。

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