Error de tipo no capturado: no se puede establecer la propiedad innerHTML de nulo Hola, recibo un error con innerHTML. Intenté innerText pero no funcionó. Busqué alguna pregunta como yo, pero no encontré la solución. Estos son mis archivos html y javascript, puedes revisarlos pero no encontré ningún problema.
<body> <div class="quiz-container"> <div class="quiz-header"> <h2 id="question">Question Text</h2> <ul> <li> <input type="radio" id="a" name="answer"> <label id="a_text" for="a">Question</label> </li> <li> <input type="radio" id="b" name="answer"> <label id="b_text" for="b">Question</label> </li> <li> <input type="radio" id="c" name="answer"> <label id="c_text" for="c">Question</label> </li> <li> <input type="radio" id="d" name="answer"> <label id="d_text" for="d">Question</label> </li> </ul> </div> <button id="submit">Submit</button> </div> </body> const quizData = [ { question: "What is the most used programming language in 2019?", a: "Java", b: "C", c: "Python", d: "JavaScript", correct: "d", }, ]; const questionEl = document.getElementById('question') const a_text = document.getElementById('a_text') const b_text = document.getElementById('b_text') const c_text = document.getElementById('c_text') const d_text = document.getElementById('d_text') const submitBtn = document.getElementById('submit') let currentQuiz = 0; function loadQuiz() { const currentQuizData = quizData[currentQuiz] questionEl.innerHTML = currentQuizData.question a_text.innerHTML = currentQuizData.a b_text.innerHTML = currentQuizData.b c_text.innerHTML = currentQuizData.c d_text.innerHTML = currentQuizData.d currentQuiz++; } loadQuiz();Parece que se llama a document.getElementById antes de que el navegador termine de representar la página.
Deberá ejecutar el código que va al DOM justo después de que el navegador esté listo.
El problema es que la variable questionEl se define como const ; porque está intentando cambiar el contenido de la variable questionEl dentro del método loadQuiz() . Defina la variable questionEl utilizando las palabras clave let o var .
const quizData = [ { question: "What is the most used programming language in 2019?", a: "Java", b: "C", c: "Python", d: "JavaScript", correct: "d", }, ]; /* The questionEl variable is defined using the "let" keyword. */ let questionEl = document.getElementById('question') const a_text = document.getElementById('a_text') const b_text = document.getElementById('b_text') const c_text = document.getElementById('c_text') const d_text = document.getElementById('d_text') const submitBtn = document.getElementById('submit') let currentQuiz = 0; function loadQuiz() { const currentQuizData = quizData[currentQuiz] questionEl.innerHTML = currentQuizData.question a_text.innerHTML = currentQuizData.a b_text.innerHTML = currentQuizData.b c_text.innerHTML = currentQuizData.c d_text.innerHTML = currentQuizData.d currentQuiz++; } loadQuiz(); <body> <div class="quiz-container"> <div class="quiz-header"> <h2 id="question">Question Text</h2> <ul> <li> <input type="radio" id="a" name="answer"> <label id="a_text" for="a">Question</label> </li> <li> <input type="radio" id="b" name="answer"> <label id="b_text" for="b">Question</label> </li> <li> <input type="radio" id="c" name="answer"> <label id="c_text" for="c">Question</label> </li> <li> <input type="radio" id="d" name="answer"> <label id="d_text" for="d">Question</label> </li> </ul> </div> <button id="submit">Submit</button> </div> </body>