Me gustaría hacer que un botón haga 3 o más cosas una tras otra. Estoy tratando de hacer un CYOA y necesito un botón para pasar por varias capas/fases/secciones (Empezar en la capa 1 a la capa 2) del CYOA, con la menor cantidad de código repetitivo* posible. Tengo texto de marcador de posición en las áreas donde va el texto en el título y los botones para ver que el código se ejecuta correctamente
*Ejemplo de código repetido
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"; } }Si desea hacerlo con ifs, solo necesita una función y actualizar una 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 { } }El problema con eso es que tienes mucho código repetido. Yo usaría una matriz de objetos.
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>Le sugiero que separe la lógica de su aplicación de la interfaz de usuario. Trate de pensar en su aplicación tal como la describe un estado . En su caso, el estado puede ser tan simple como el texto del título ("Etapa 1", "Etapa 2", etc.) o tan complejo como pueda imaginar. Al interactuar con la interfaz de usuario, el usuario realiza acciones . En tu caso hay dos botones por lo que tus acciones serían "Sí" y "No". Cada acción actualiza el estado (que es la lógica de la aplicación), y cada estado podría mostrarse en la pantalla (que es parte de la interfaz de usuario). En el siguiente código, definí dos funciones para hacer precisamente eso. En realidad, es más código que en su ejemplo, por lo que tal vez no sea exactamente lo que solicitó), pero en mi opinión, es mucho más simple de leer y ampliar su funcionalidad.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Stages</title> </head> <body> <div id="centered"> <h1 id="title"></h1> <button onclick="update('yes')" class="choice1" id="button1">Yes</button> <button onclick="update('no')" class="choice1" id="button2">No</button> </div> <script> let state = "Phase 1"; // current state render(state); function render(state) { const titleElement = document.getElementById("title"); titleElement.innerHTML = state; } function update(action) { /* updating state */ switch (action) { case "yes": switch (state) { case "Phase 1": state = "Phase 2"; break; case "Phase 2": state = "Phase 3"; break; case "Phase 3": state = "End"; break; } break; case "no": state = "End"; break; } /* changing UI */ render(state); } </script> </body> </html>Si encuentra este enfoque interesante, le sugiero que lea esto .