0

Somehow in js in const questionEl = document.getElementById('question'); is returning null. I checked all the id selectors and found out that they were all returning null. I cannot understand the cause of the problem. I have elements with the specified id. Then why is still returning null?

const questionEl = document.getElementById('question');
const a_text = document.getElementById("a");
console.log("This  is >>", a_text);
const b_text = document.getElementById("b");
const c_text = document.getElementById("c");
const d_text = document.getElementById("d");

let currentQuestion = 0;

function loadQuiz() {
  console.log(quizData[currentQuestion].question)
  questionEl.innerHTML = quizData[currentQuestion].question;
  currentQuestion++;
}

loadQuiz();
<div class="quiz-container">
  <div class="quiz-header">
    <h2 id="question">Question text</h2>
  </div>

  <ul class="quiz-options">
    <li>
      <input type="radio" id="a" name="answer">
      <label for="a" id="a_text">Question</label>
    </li>
    <li>
      <input type="radio" id="b" name="answer">
      <label for="a" id="b_text">Question</label>
    </li>
    <li>
      <input type="radio" id="c" name="answer">
      <label for="a" id="c_text">Question</label>
    </li>
    <li>
      <input type="radio" id="d" name="answer">
      <label for="a" id="d_text">Question</label>
    </li>
  </ul>
  <button>Next</button>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Anagh Basak
  • 147
  • 9
  • 2
    Are you executing your JS before the page has been rendered? – j08691 Jul 12 '21 at 14:05
  • 2
    Unrelated to this question, but you have `for="a"` on all of your labels. – DBS Jul 12 '21 at 14:06
  • 1
    Add `defer` to the script tag loading your js, i.e., ` – Ameer Jul 12 '21 at 14:07
  • @j08691 I don't understand how that is possible. I am newbie. I have linked the external js file in html use `script src` – Anagh Basak Jul 12 '21 at 14:08
  • Is the JS script linked in the head of your page, or at the end before the closing body tag? – j08691 Jul 12 '21 at 14:08
  • 1
    If you put the ` – Pointy Jul 12 '21 at 14:09
  • @Ameer it worked. Would you mind to tell what this `defer` does? – Anagh Basak Jul 12 '21 at 14:09
  • For sure, I'll post an answer with more details! – Ameer Jul 12 '21 at 14:09
  • 1
    Like others are pointing out, sounds like it's running before the DOM is loaded, try wrapping it in an event? `document.addEventListener('DOMContentLoaded', function() { ...do stuff here... }, false);` – Chris W. Jul 12 '21 at 14:09
  • Don't defer. Instead do `window.addEventListener("load",loadQuiz);` – mplungjan Jul 12 '21 at 14:10
  • 1
    There's a perfectly good duplicate target, we don't need multiple different answers in the comments! – Quentin Jul 12 '21 at 14:10
  • @Quentin Already closed – mplungjan Jul 12 '21 at 14:10
  • I shifted the script source to the `body` and everything is all fine. – Anagh Basak Jul 12 '21 at 14:11
  • 1
    @AnaghBasak When I made you a snippet, the snippet added the code after the load of the page. That solved the issue so I closed with a dupe – mplungjan Jul 12 '21 at 14:11

0 Answers0