Question

只有一个按钮。

javascript程序包含3个部分。

//section 1

var x = 3;

console.log("x = " + x);


//section 2

x += 7;

console.log("x = " + x);


//section 3:

x += 6;

console.log("x = " + x);

我想要达到的效果是：

我正在点击按钮-仅第1部分正在执行
我再次单击该按钮-仅执行第2部分
我再次单击按钮-仅执行第3部分
我再次单击该按钮-仅执行第1部分
我再次单击该按钮-仅执行第2部分

以此类推。

Answer 1

不需要循环，可以使用按钮的相同事件处理程序来完成。

作为旁注，如果您正在寻找一种逐步调试的方法，则可以使用浏览器的“调试或调试器”选项卡右键单击->检查来完成。您可以设置断点并逐步运行脚本。

var output = document.getElementById("output");
var theButton = document.getElementById("theButton");
var section = 0;

var x;
theButton.onclick = function(){
    section++;
    var temporaryResult = "Nothing";
    if(section == 4){
        section = 1;
    }
    if(section == 1){
        //Do the math
        x = 0;
        // Set the result to show
        temporaryResult = x;
    }
    if(section == 2){
        //Do the math
        x += 10;
        // Set the result to show
        temporaryResult = x;
    }
    if(section == 3){
        x -= 25;
        temporaryResult = x;
    }
    output.innerHTML = temporaryResult;
    //For console log:
    console.log(temporaryResult);
}

<div id="output">Results here</div>
<button id="theButton">Next</Button>

使用同一按钮可循环触发三个事件

1 个答案: