如何实现点击按钮后让一个if语句在前一个执行完毕后再运行？

我尝试过编写能触发其他if语句的if语句，但它们会同时运行；我也试过使用else if语句，但似乎并不奏效。请问该如何实现：当前一个if语句执行完成后，再次点击按钮时才激活下一个if语句？

以下是我的代码：

let One = true
let Two = false
let Three = false
function right() {
    if (One === true) {
        if (Two === false) {
            document.getElementById("2").innerHTML = 1
            document.getElementById("1").innerHTML = ''
            Two = true
            One = false
        } else {
            if (Three === false) {
                document.getElementById("3").innerHTML = 1
                document.getElementById("2").innerHTML = ''
                Three = true
                Two = false
            }
        }
    }
}

你的代码逻辑存在核心缺陷：第一次点击后，One被设为false，后续点击按钮时，外层的if (One === true)条件不再成立，导致后续所有逻辑分支都无法触发，自然无法执行到Three相关的操作。

用单一状态变量跟踪当前执行步骤，替代三个独立的布尔值，逻辑更清晰且不易出错。每次点击时根据当前状态执行对应操作，完成后更新状态到下一步即可。

方案一：switch-case实现 #

// 初始化当前步骤为第1步
let currentStep = 1;

function right() {
    switch(currentStep) {
        case 1:
            // 执行第一步操作
            document.getElementById("2").innerHTML = 1;
            document.getElementById("1").innerHTML = '';
            currentStep = 2; // 切换到第二步
            break;
        case 2:
            // 执行第二步操作
            document.getElementById("3").innerHTML = 1;
            document.getElementById("2").innerHTML = '';
            currentStep = 3; // 切换到第三步
            break;
        case 3:
            // 可扩展第三步及之后的操作，比如重置或其他逻辑
            break;
    }
}

方案二：if-else实现 #

let currentStep = 1;

function right() {
    if (currentStep === 1) {
        document.getElementById("2").innerHTML = 1;
        document.getElementById("1").innerHTML = '';
        currentStep = 2;
    } else if (currentStep === 2) {
        document.getElementById("3").innerHTML = 1;
        document.getElementById("2").innerHTML = '';
        currentStep = 3;
    } else if (currentStep === 3) {
        // 按需添加后续操作
    }
}

这样每次点击按钮只会执行当前步骤的代码块，执行完成后更新状态，下一次点击就会触发下一个步骤的逻辑，完美实现“前一个执行完成后，再次点击才激活下一个”的需求。

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