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
JavaScript
x
17
17
1
function change_text(a){
2
if (a == 1) {
3
document.getElementById("title").innerHTML = "Phase 2";
4
document.getElementById("button1").innerHTML = "Ye";
5
document.getElementById("button2").innerHTML = "N";
6
} else {
7
document.getElementById("title").innerHTML = "The End";
8
}
9
function change_text(a){
10
if (a == 2) {
11
document.getElementById("title").innerHTML = "Phase 3";
12
document.getElementById("button1").innerHTML = "Ye";
13
document.getElementById("button2").innerHTML = "N";
14
} else {
15
document.getElementById("title").innerHTML = "The End";
16
}
17
HTML
JavaScript
1
4
1
<div id="centered"><h1 id="title">Phase 1</h1>
2
<button onclick="change_text(1)" class="choice1" id="button1">Yes</button>
3
<button onclick="change_text(2)" class="choice1" id="button2">No</button></div>
4
Javascript
JavaScript
1
10
10
1
function change_text(a){
2
if (a == 1) {
3
document.getElementById("title").innerHTML = "Phase 2";
4
document.getElementById("button1").innerHTML = "Ye";
5
document.getElementById("button2").innerHTML = "N";
6
} else {
7
document.getElementById("title").innerHTML = "The End";
8
}
9
}
10
Advertisement
Answer
If you want to do it with ifs, you just need one function and update a variable.
JavaScript
1
14
14
1
var currentStep = 0;
2
function change_text(a){
3
currentStep++;
4
if (currentStep == 1) {
5
document.getElementById("title").innerHTML = "Phase 2";
6
document.getElementById("button1").innerHTML = "Ye";
7
document.getElementById("button2").innerHTML = "N";
8
} else if (currentStep == 2) {
9
10
} else {
11
12
}
13
}
14
Problem with that is you have a lot of repeated code. I would use an array of objects.
JavaScript
1
30
30
1
var phases = [{
2
title: "FOO 1",
3
btn1: "foo 1",
4
}, {
5
title: "FOO 2",
6
btn1: "foo 2",
7
}, {
8
title: "FOO 3",
9
btn1: "foo 3",
10
}, {
11
title: "FOO 4",
12
btn1: "done",
13
}, ];
14
15
16
var currentStep = 0;
17
18
var heading = document.getElementById("heading");
19
var btn1 = document.getElementById("btn1");
20
21
function updateStep() {
22
var step = phases[currentStep];
23
if (step) {
24
heading.textContent = step.title;
25
btn1.textContent = step.btn1;
26
currentStep++;
27
}
28
}
29
30
btn1.addEventListener("click", updateStep);
JavaScript
1
2
1
<h2 id="heading">Welcome</h2>
2
<button id="btn1">Next</button>