Use the same button to trigger three events in a loop - events

Question

There is one button.
The javascript program contains 3 sections.
//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);
The effect I want to achieve is:
I'm clicking the button - only section 1 is being executed
I'm clicking the button again - execution of section 2 only
I'm clicking the button again - execution of section 3 only
I'm clicking the button once more - execution of section 1 only
I'm clicking the button again - execution of section 2 only
and so on.

Answer 1

A loop is not necessary, this can be done with the same event handler for the button.
As a side note, if you are looking for a way to debug step by step, that can be done using the 'Debug or Debugger' tab of the brwoser afte right click -> inspect. You can set breakpoints and run the script step by step.
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>