Why is js not updating my data in HTML page?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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