Having trouble in building my first JS quiz

Karan Tyagi

I am a complete beginner in JS. I am trying to make a quiz using JS but constantly getting this error. Can anyone help, please?

This is my HTML:

<body>
    <div id="quiz"></div>
    <button id="submit">Get Results</button>
    <div id="results"></div>
</body>

Here is my JS code:

var myQuestions = [
    {
        question: "What is 10/2?",
        answers: {
            a: '3',
            b: '5',
            c: '115'
        },
        correctAnswer: 'b'
    },
    {
        question: "What is 30/3?",
        answers: {
            a: '3',
            b: '5',
            c: '10'
        },
        correctAnswer: 'c'
    }
];

var quizContainer = document.getElementById("quiz");
var resultsContainer = document.getElementById("results");
var submitButton = document.getElementById("submit");

function generateQuiz(questions, quizContainer, resultsContainer, submitButton){

    function showQuestions(questions, quizContainer){
    // we'll need a place to store the output and the answer choices
        var output = [];
        var answers;

    // for each question...
        for(var i=0; i<questions.length; i++){
        
            // first reset the list of answers
            answers = [];

        // for each available answer to this question...
            for(letter in questions[i].answers){

                // ...add an html radio button
                answers.push(
                    '<label>'
                    + '<input type="radio" name="question'+i+'" value="'+letter+'">'
                    + letter + ': '
                    + questions[i].answers[letter]
                    + '</label>'
                );
            }

        // add this question and its answers to the output
            output.push(
                '<div class="question">' + questions[i].question + '</div>'
                + '<div class="answers">' + answers.join('') + '</div>'
            );
        }

    // finally combine our output list into one string of html and put it on the page
        quizContainer.innerHTML = output.join('');
    }

    function showResults(questions, quizContainer, resultsContainer){
    }

    // show the questions
    showQuestions(questions, quizContainer);

    // when user clicks submit, show results
    submitButton.onclick = function(){
        showResults(questions, quizContainer, resultsContainer);
    }
}
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

I am getting this error in my console. It's showing that it can't set innerHTML property of a null element even though I have already defined it.

error message

This is the line where I think the problem is:

quizContainer.innerHTML = output.join('');

Matt

When the browser loads the page and comes across a <script> tag, it executes the script at this moment and does not continue building the DOM. Therefore, the elements you are referencing in the script do not exist at this point.

The best way would be to make the script execute the generateQuiz explicitly in window.onload and to hide the variables. This separates loading and execution of the desired function in the script and gives you explicit control when the callback (generation of quiz) is actually executed.

window.onload = function() {
    const quizContainer = document.getElementById("quiz");
    const resultsContainer = document.getElementById("results");
    const submitButton = document.getElementById("submit");
    generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
}

Another way is to use defer in order to run the script after the DOM is fully built:

<!doctype html>
<html>
  <head>
    <script defer src="script.js"></script>
  </head>
  <body>
    <div id="quiz"></div>
    <button id="submit">Get Results</button>
    <div id="results"></div>
  </body>
</html>

Or just by placing the script below the elements that are referred:

<!doctype html>
<html>
  <body>
    <div id="quiz"></div>
    <button id="submit">Get Results</button>
    <div id="results"></div>
    <script src="script.js"></script>
  </body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-18

Comments

0 comments

TOP Ranking

Article

Having trouble in building my first JS quiz

Having trouble in building my first JS quiz

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

How to import an asset in swift using Bundle.main.path() in a react-native native module

Inner Loop design for webscrapping

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Removed zsh, but forgot to change shell back to bash, and now Ubuntu crashes (wsl)

Ambiguous use of 'init' with CFStringTransform and Swift 3

Resetting Value of <input type="time"> in Firefox

Execute ./script.sh with a crontab

Converting a class method to a property with a backing field

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

How to update azerothcore-wotlk docker container

How to set tab order for array of cluster,where cluster elements have different data types in LabVIEW?

Grails with Oracle thick OCI driver authenticate to Oracle with wrong user

How to pass data to the ng2-bs3-modal?

Making Array From Page Elements in jQuery

Retrieve Element Tag Value XML Using Bash

Laravel's ORM sync with timestamps doesn't update timestamps

Do animations stop css changes after animation completion?