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>