Why is js not updating my data in HTML page?

Question

I am working on a quiz game but my HTML page is not being updated by JavaScript. I also think that json is not loading.

In this image, in place of dummy questions and answers are expected but they are not being loaded in main page. I think innerHTML is not loading my data on main HTML page.

 var quizData = [ { question: "Who discovered charge as positive and negative?", a: "Benjamin Franklin", b: "Narendra Modi", c: "Abdul Kalam", d: "Lalu Yadav", correct: "a", }, { question: "Which charge is free to move?", a: "negative", b: "postive", c: "both a and b", d: "none of the above", correct: "a", }, ]; var quiz=document.getElementById("quiz"); var answerEls=document.querySelectorAll(".answer"); var questionEl=document.getElementById("question"); var a_text=document.getElementById("a_text"); var b_text=document.getElementById("b_text"); var c_text=document.getElementById("c_text"); var d_text=document.getElementById("d_text"); var submitBtn=document.getElementById("submit"); let currentQuiz = 0; let score = 0; loadQuiz(); function loadQuiz(){ deselectAnswers(); var currentQuizData = quizData[currentQuiz]; questionEl.innerText = currentQuizData.question; a_text.innerText = currentQuizData.a; b_text.innerText = currentQuizData.b; c_text.innerText = currentQuizData.c; d_text.innerText = currentQuizData.d; } function getSelected() { let answer = undefined; answerEls.forEach((answerEl) => { if (answerEl.checked) { answer = answerEl.id; } }); return answer; } function deselectAnswers(){ answerEls.forEach((answerEl) => { answerEl.checked = false; }); } submitBtn.addEventListener("click", () => { var answer = getSelected(); if(answer){ if(answer === quizData[currentQuiz].correct) { score++; } currentQuiz++; if(currentQuiz < quizData.length) { loadQuiz(); } else { quiz.innerHTML = ` <h2> You answered correctly at $(score)/${quizData.length} questions.</h2> <button onclick="location.reload()">Reload</button> `; } } });

 import url("https://font-googleapis.com/css2?family-Poppins:wght@200;600&display=swap"); *{ box-sizing: border-box; } body{ background-color: #b8c6db; background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; margin: 0; min-height: 100%; } .quiz-container{ background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px 2px rgba(100 , 100, 100, .1); overflow: hidden; width: 600px; max-width: 100%; } .quiz-header{ padding: 4rem; } h2{ padding: 1rem; text-align: center; margin: 0; } ul{ list-style: none; padding: 0%; } ul li{ font-size: 1.2rem; margin: 1rem 0; } button{ background-color: #8e44ad; border: none; color: white; cursor: pointer; display: block; font-family: inherit; font-size: 1.1rem; width: 100%; padding: 1.3rem; } button:hover{ background-color: #5e3370; } button:focus{ background-color: #5e3370; outline: none; }

 <!DOCTYPE html> <html lang="en"> <head> <title>Quiz App</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/style.css" rel="stylesheet"> <script src="script.js"></script> </head> <body> <div class="quiz-container" id="quiz"> <div class="quiz-header"> <h2 id="question">Question Text</h2> <ul> <li> <input type="radio" id="a" name="answer" class="answer"> <label for="a" id="a_text">Question</label> </li> <li> <input type="radio" id="b" name="answer" class="answer"> <label for="b" id="b_text">Question</label> </li> <li> <input type="radio" id="c" name="answer" class="answer"> <label for="c" id="c_text">Question</label> </li> <li> <input type="radio" id="d" name="answer" class="answer"> <label for="d" id="d_text">Question</label> </li> </ul> </div> <button id="submit">Sumbit</button> </div> </body> </html>

Answer 1

You should move <script src="script.js"></script> to the bottom of the body tag after the elements have been initialised.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Quiz App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
    <div class="quiz-container" id="quiz">
        <div class="quiz-header">
            <h2 id="question">Question Text</h2>
            <ul>
                <li>
                    <input type="radio" id="a" name="answer" class="answer">
                    <label for="a" id="a_text">Question</label>
                </li>
                <li>
                    <input type="radio" id="b" name="answer" class="answer">
                    <label for="b" id="b_text">Question</label>
                </li>
                <li>
                    <input type="radio" id="c" name="answer" class="answer">
                    <label for="c" id="c_text">Question</label>
                </li>
                <li>    
                    <input type="radio" id="d" name="answer" class="answer">
                    <label for="d" id="d_text">Question</label>
                </li>
            </ul>
        </div>
        <button id="submit">Sumbit</button>
    </div>
    <script src="script.js"></script>
    </body>
</html>

Answer 2

You should move script after the body, if script is loaded before page, it can't access DOM elements. And script.js has some syntax errors

at line 27 in script.js , It should be getElementById

var submitBtn=document.getElementById("submit");

at line 74, enclose the string in backticks (`) to use template literals

quiz.innerHTML = `
    <h2> You answered correctly at ${score}/${quizData.length} questions.</h2>
    <button onclick="location.reload()">Reload</button> 
    `;

corrected source code here

Answer 3

in js file

quiz.innerHTML = `
        <h2> You answered correctly at ${score}/${quizData.length} questions.</h2>
        <button onclick="location.reload()">Reload</button> 
        `;

Why is js not updating my data in HTML page?

Question

3 answers

solution1
0 2021-09-23 14:29:34

solution2
0 ACCPTED 2021-09-23 14:35:44

solution3
0 2021-10-22 19:05:49

Why is js not updating my data in HTML page?

Question

3 answers

solution1 0 2021-09-23 14:29:34

solution2 0 ACCPTED 2021-09-23 14:35:44

solution3 0 2021-10-22 19:05:49

solution1
0 2021-09-23 14:29:34

solution2
0 ACCPTED 2021-09-23 14:35:44

solution3
0 2021-10-22 19:05:49