Используйте ту же кнопку, чтобы вызвать три события в цикле - PullRequest
Новая
       15

Используйте ту же кнопку, чтобы вызвать три события в цикле

0 голосов
/ 07 октября 2018

Есть одна кнопка.

Программа 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. Я нажимаю кнопку - выполняется только раздел 1

  2. Я нажимаю кнопку еще раз - выполнение только раздела 2

  3. Я нажимаю кнопку еще раз - выполнение только раздела 3

  4. Я нажимаю кнопку еще раз - выполнение только раздела 1

  5. Я снова нажимаю на кнопку - только выполнение раздела 2

и т. Д.

1 Ответ

0 голосов
/ 07 октября 2018

Цикл не требуется, это можно сделать с помощью того же обработчика событий для кнопки.

В качестве примечания, если вы ищете способ пошаговой отладки, это можно сделатьиспользуя вкладку «Отладка или Отладчик» в brwoser, щелкните правой кнопкой мыши -> осмотрите.Вы можете установить точки останова и запустить скрипт шаг за шагом. 

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>
...