Soy nuevo en Js, y estoy codificando una aplicación de prueba simple con HTML, CSS y JS para aprender.
Soy un desarrollador móvil y uso Flutter y Dart, Dart es bastante similar a JS. En la aplicación de prueba, cuando alguien presiona el siguiente botón después de una pregunta respondida, quiero que cambie a la siguiente pregunta.
Cuando el usuario presiona el botón, no sucede nada... En dart, usaría el método setState, que obliga a la interfaz de usuario a recargarse con los cambios actualizados. ¿Hay un método equivalente en JS? Descubrí que setState se usa en ReactJS, sin embargo, esto está codificado en Vanilla Js.
Tengo una matriz de 2 preguntas (que son mapas que contienen el texto de la pregunta, las alternativas de respuesta y la respuesta correcta). Entonces tengo una variable entera que es el índice de preguntas. Entonces, primero cuestione el índice i 0, y cuando el usuario presione el botón siguiente (para ir a la siguiente pregunta), debería incrementarse en 1.
Aquí está el código para hacer clic en el botón:
function onClickNext() { console.log("called"); currentQuestionIndex++; }la matriz de preguntas:
const questions = [ { question: "What is the capital of Sweden?", "alt 1": "Stockholm", "alt 2": "Gothenburg", "alt 3": "Malmö", "alt 4": "Linköping", correctIndex: 0, }, { question: "What is the capital of England?", "alt 1": "London", "alt 2": "Manchester", "alt 3": "Bournemouth", "alt 4": "Cardiff", correctIndex: 0, }, ];Y aquí están los componentes HTML dinámicos (las alternativas de pregunta + respuesta, que se supone que cambian cuando se presiona siguiente, por lo que pasa a la siguiente pregunta).
document.getElementById("question").innerHTML = questions[currentQuestionIndex]["question"]; button1.innerHTML = questions[currentQuestionIndex]["alt 1"]; button2.innerHTML = questions[currentQuestionIndex]["alt 2"]; button3.innerHTML = questions[currentQuestionIndex]["alt 3"]; button4.innerHTML = questions[currentQuestionIndex]["alt 4"];Estaría muy agradecido por alguna orientación, y también si alguien sabe una manera de hacer que mi código sea más conciso y eficiente.
¡Gracias!
Dado que Vanilla JS no tiene state listeners que actualicen el DOM automáticamente, puede programarlo usted mismo, por ejemplo:
function onClickNext() { console.log("called") currentQuestionIndex++ drawQuestionScreen() } function drawQuestionScreen(){ document.getElementById("question").innerHTML = questions[currentQuestionIndex]["question"]; button1.innerHTML = questions[currentQuestionIndex]["alt 1"]; button2.innerHTML = questions[currentQuestionIndex]["alt 2"]; button3.innerHTML = questions[currentQuestionIndex]["alt 3"]; button4.innerHTML = questions[currentQuestionIndex]["alt 4"]; }Simplemente complete el HTML de la pregunta nuevamente después de llamar a onClickNext para que la reasignación tenga efecto.
Para que el código sea más conciso, primero guarde la pregunta en el índice actual en una variable, en lugar de acceder a través del índice cada vez.
const questionDiv = document.getElementById("question"); const populateQuestion = () => { const question = questions[currentQuestionIndex]; questionDiv.innerHTML = question.question; button1.innerHTML = question["alt 1"]; button2.innerHTML = question["alt 2"]; button3.innerHTML = question["alt 3"]; button4.innerHTML = question["alt 4"]; } // populate on pageload: populateQuestion(); // and also on click: function onClickNext() { currentQuestionIndex++; populateQuestion(); } Un enfoque aún mejor sería usar una matriz para los botones y las respuestas en lugar de nombres de propiedades y variables separados. Considere nombrar la matriz de posibles respuestas answers en lugar de alt , probablemente tenga más sentido de un vistazo.
const populateQuestion = () => { const question = questions[currentQuestionIndex]; questionDiv.innerHTML = question.question; question.answers.forEach((answer, i) => { buttons[i].textContent = answer; }); } También debe considerar usar .textContent : solo use .innerHTML cuando inserte deliberadamente marcado HTML.