How would I implement a next and previous button in JavaScript?-CodePudding

I am using plain JavaScript and JQuery in my program. I have a start button that just lets the program run freely.

<button  id= "start"> Start </button>

document.getElementsByTagName('button')[0].addEventListener('click', function() {
        step1();
        step2();
        step3();
        step4();
        step5();  
    })

function step1() {
   some action
}
function step2() {
   some action
}
function step3() {
   some action
}
function step4() {
   some action
}
function step5() {
   some action
}

How would I also include a next and previous button where I can show each function separately and go back and forth between them?

CodePudding user response：

First of all, there isn't any jQuery in your code (keep it that way) :)

Secondly, if the page isn't reloading, then you should attach a single event listener like:

var step = 0;
ele.addEventListener(function() {
// basically store which step you're on and the click adjusts the step
// and then calls the function associated with that step
    step  ;
    doNextStep(step);
});

CodePudding user response：

Simple switch case will be helpful.

<button  id= "start" onclick="start()"> Start </button>
<button  id= "next" onclick="next()"> Next </button>
<button  id= "previous" onclick="previous()"> Previous </button>

<script>
 var step = 0;
 
 function start() {
   next();
   // Other scripts run step;    
 } 
 
 function next() {
    step  ;
    handleStep();
 }

 function previous() {
   if (step > 0)
      step--;
   handleStep();
 }

 handleStep() {
   switch (step) {
     case 1: 
       step1();
       break;
     case 2: 
       step2();
       break;
     ......
     .......
     default:
       // Go to the first step  or any other logic as you want
       break;
   }
 } 


function step1() {
   some action
}
function step2() {
   some action
}
function step3() {
   some action
}
function step4() {
   some action
}
function step5() {
   some action
}

</script>