'Console: Unable to read the 'addEventListener' property from null

For some reason, the console writes this error and I do not know why. Please help me! I can say I was partially repeating the man in the YouTube video, but still a mistake.

For some reason, the console writes this error and I do not know why. Please help me! I can say I was partially repeating the man in the YouTube video, but still a mistake.

Below I have attached js and html code...

<form action="" class="quiz__form">
  <div class="quiz__form-items">

    <div class="quiz__form-item">
      <div class="radio-item">
        <label class="quiz__label">
          <div class="text">Lorem ipsum dolor sit amet.</div>
          <input type="radio" class="input">
        </label>
        <label class="quiz__label">
          <div class="text">Lorem ipsum dolor sit amet.</div>
          <input type="radio" class="input">
        </label>
        <label class="quiz__label">
          <div class="text">Lorem ipsum dolor sit amet.</div>
          <input type="radio" class="input">
        </label>
        <label class="quiz__label">
          <div class="text">Lorem ipsum dolor sit amet.</div>
          <input type="radio" class="input">
        </label>
      </div>
    </div>

    <div class="quiz__form-item">
      <div class="radio-item">
        <label class="quiz__label">
          <div class="text">1</div>
          <input type="radio" class="input">
        </label>
        <label class="quiz__label">
          <div class="text">2</div>
          <input type="radio" class="input">
        </label>
        <label class="quiz__label">
          <div class="text">3</div>
          <input type="radio" class="input">
        </label>
        <label class="quiz__label">
          <div class="text">4</div>
          <input type="radio" class="input">
        </label>
      </div>
    </div>

  </div>

  <div class="quiz__buttons">
    <a href="#" class="prevBtn">Prev</a>
    <a href="#" class="nextBtn">Next</a>
  </div>
</form>

function updateForm() {

    const quizItem = document.querySelectorAll('quiz__form-item');
    const prevBtn = document.querySelector('prevBtn');
    const nextBtn = document.querySelector('nextBtn');

    let formStep = 0;



    prevBtn.addEventListener('click', () => {
        formStep--
    })

}
updateForm();
javascripthtmlcss


Solution 1:[1]

This would probably mean that your prevBtn element isn't defined properly. I would try to replace <a href="#" class="prevBtn">Prev</a> with <a href="#" id= "previousButton" class="prevBtn">Prev</a>. Then I would replace const prevBtn = document.querySelector('prevBtn'); with const prevBtn = document.getElementById("previousButton"); See how that works for you and let me know. Basically I just referenced the element by Id instead of using a query to reference a class.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tb_03

Related Questions