Skip to content
Advertisement

How do I change the function of a button more than 2 times?

I would like to make one button do 3 or more things one after the other. I’m trying to make a CYOA and I need one button to go through multiple layers/phases/sections(Start to layer 1 to layer 2) of the CYOA, with as little repeating code* as possible. I have placeholder text in the areas where the text in the title and the buttons go to see that the code runs properly

*Example of repeating code

        function change_text(a){
            if (a == 1) {           
            document.getElementById("title").innerHTML = "Phase 2";
            document.getElementById("button1").innerHTML = "Ye";
            document.getElementById("button2").innerHTML = "N";
            } else {
            document.getElementById("title").innerHTML = "The End";
            }
        function change_text(a){
            if (a == 2) {           
            document.getElementById("title").innerHTML = "Phase 3";
            document.getElementById("button1").innerHTML = "Ye";
            document.getElementById("button2").innerHTML = "N";
            } else {
            document.getElementById("title").innerHTML = "The End";
            }

HTML

<div id="centered"><h1 id="title">Phase 1</h1>
<button onclick="change_text(1)" class="choice1" id="button1">Yes</button>
<button onclick="change_text(2)" class="choice1" id="button2">No</button></div>

Javascript

        function change_text(a){
            if (a == 1) {           
            document.getElementById("title").innerHTML = "Phase 2";
            document.getElementById("button1").innerHTML = "Ye";
            document.getElementById("button2").innerHTML = "N";
            } else {
            document.getElementById("title").innerHTML = "The End";
            }
        }

Advertisement

Answer

If you want to do it with ifs, you just need one function and update a variable.

var currentStep = 0;
function change_text(a){
  currentStep++;
  if (currentStep == 1) {           
    document.getElementById("title").innerHTML = "Phase 2";
    document.getElementById("button1").innerHTML = "Ye";
    document.getElementById("button2").innerHTML = "N";
  } else if (currentStep == 2) {
    ...
  } else {

  }
}

Problem with that is you have a lot of repeated code. I would use an array of objects.

var phases = [{
  title: "FOO 1",
  btn1: "foo 1",
}, {
  title: "FOO 2",
  btn1: "foo 2",
}, {
  title: "FOO 3",
  btn1: "foo 3",
}, {
  title: "FOO 4",
  btn1: "done",
}, ];


var currentStep = 0;

var heading = document.getElementById("heading");
var btn1 = document.getElementById("btn1");

function updateStep() {
   var step = phases[currentStep];
   if (step) {
     heading.textContent = step.title;
     btn1.textContent = step.btn1;
     currentStep++;
   }
}

btn1.addEventListener("click", updateStep);
<h2 id="heading">Welcome</h2>
<button id="btn1">Next</button>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement