Cannot set properties of null (setting 'innerHTML')-CodePudding

Uncaught Typeerror: Cannot set property innerHTML of null Hello, I am taking an error with innerHTML. I tried innerText but it did not work i search some question as like me but i did not find the solution. These are my html and javascript files u can check them but i didn't find any proplem.

<body>

    <div >
        <div >
            <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();

CodePudding user response：

It's look like document.getElementById is called before the browser finish to render the page.

You will need to run the code that go to the DOM just after the browser is ready.

CodePudding user response：

The problem is that the variable questionEl is defined as const; because you are trying to change the content of the variable questionEl inside the loadQuiz() method. Define the questionEl variable using the let or var keywords.

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 >
    <div >
        <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>