Soy un codificador principiante que intenta escribir un cuestionario solo con HTML, CSS, JS. Ya tengo mi primera pregunta y botones en mi documento HTML y estaba planeando usar el método replace() para ingresar las nuevas preguntas/respuestas.

Actualmente: cuando el usuario hace clic en un botón, <h1> se reemplaza con la nueva pregunta. Pero ahora no puedo reemplazar los botones de respuesta. ¿Cómo recupero el valor de las respuestas de mi matriz anidada dentro de un objeto? ¿O estoy haciendo esto completamente mal?

Esperado: cuando el usuario hace clic en un botón de respuesta, se le presenta un nuevo conjunto de preguntas/respuestas.

 let questionsArray = [ { question: "The condition in an if / else statement is enclosed within ____.", choices: [ "quotes", "curly brackets", "parentheses", "square brackets," ], answer: "parentheses" }, { question: "Arrays in JavaScript can be used to store ____.", choices: [ "numbers and strings", "other arrays", "booleans", "all of the above", ], answer: "all of the above", }, { question: "String values must be enclosed within ____ when being assigned to variables.", choices: [ "commas", "curly brackets", "quotes", "parentheses", ], answer: "quotes", }, { question: "A very useful tool used during development and debugging for printing content to the debugger is: ", choices: [ "Javascript", "terminal/bash", "for loops", "console.log", ], answer: "console.log", } ] function getQuestion() { //set currentQuestion from questionArray let currentQuestion = questionsArray[questionsArrayIndex]; questionEl.textContent = currentQuestion.question; //set choices from questionArray ?? } //on button click, getQuestion function will run btnContainerEl.addEventListener("click", function() { getQuestion(); });