Why are my buttons on javascript not responding when clicked?

Question

Idk whats wrong, I tried adding id to buttons and that didn't work either so I just went back to using the class of the buttons in querySelect. I also tried using onclick and still no response. The button is supposed to turn green or red when clicked depending on whether it is correct. There are also no errors in developer tools.

< script >
function Q1correct() {
    correct.style.backgroundColor = 'green';
    document.querySelector('#resultQ1').innerHTML = 'Correct!';
  }

function Q1wrong() {
  for (let i = 0; i < incorrects.length; i++) {
    incorrects[i].style.backgroundColor = 'red';
    document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
  }

}

function Q2() {
  if (secondQ.value.toLowerCase() == "yes") {
    secondQ.style.backgroundColor = 'green';
    document.querySelector('#resultQ2').innerHTML = 'Correct!';
  } 
  else {
    secondQ.style.backgroundColor = 'red';
    document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
  }
}
document.addEventListener('DOMContentLoaded', function() {
  let correct = document.querySelector('.correct');
  correct.addEventListener('click', correct);

  let incorrects = document.querySelectorAll('.incorrect');
  incorrects.addEventListener('click', Q1wrong);

  let secondQ = document.querySelector('#check');
  secondQ.addEventListener('click', Q2);
});

<
/script>

<body>

  <div class="jumbotron">
    <h1>Trivia!</h1>
  </div>

  <div class="container">

    <div class="section">
      <h2>Part 1: Multiple Choice </h2>
      <hr>

      <h3>What is Dwayne "The Rock" Johnson's real middle name? </h3>

      <button class='incorrect'>Johnsons</button>
      <button class='incorrect'>Pebble</button>
      <button class='correct'>Douglas</button>
      <button class='incorrect'>Teetsy</button>
      <button class='incorrect'>Lewis</button>

      <p id='resultQ1'></p>

    </div>

    <div class="section">
      <h2>Part 2: Free Response</h2>
      <hr>
      <h3>Do you smell what The Rock is cooking?</h3>
      <input type='text'>
      <button id='check' class="input">Check answer</button>
      <p id='resultQ2'></p>
    </div>

  </div>
</body>

You have typo in `"DOMContentLoaded"`. Note the caps for `"DOM"` — charlietfl, Mar 27 '21 at 01:08
Why say "There are also no errors in developer tools"? Opening the console in a browser showing the posted code and markup shows `Uncaught TypeError: incorrects.addEventListener is not a function` — traktor, Mar 27 '21 at 01:36
is the problem being caused by incorrect script [tag syntax](https://www.w3.org/community/webed/wiki/HTML/Training/Tag_syntax)? `< scrpt >` and `<\n/script>` are not valid HTML tags. — traktor, Mar 27 '21 at 02:45

score 0 · Answer 1 · answered Mar 27 '21 at 01:08

0

The correct event name is "DOMContentLoaded". You are writting "DomContentLoaded".

answered Mar 27 '21 at 01:08

Vinicius Silveira Alves

824
7
14

Cool. I did that and the buttons still do not respond. – zubairumatiya Mar 27 '21 at 01:19

Sifat Haque · Answer 2 · 2021-03-27T03:02:48.293

First of all you have a typo 'DOMContentLoaded'.

Also you need to attach event listener to an individual item. Instead you've attached the click listener to an NodeLists which won't work.

Also you've declared some variable inside DOMContentLoaded and used them inside other function. Which of course won't work because of functional scoping.

You can check this working code to get some idea.

<body>

  <div class="jumbotron">
    <h1>Trivia!</h1>
  </div>

  <div class="container">

    <div class="section">
      <h2>Part 1: Multiple Choice </h2>
      <hr>

      <h3>What is Dwayne "The Rock" Johnson's real middle name? </h3>

      <button class='incorrect'>Johnsons</button>
      <button class='incorrect'>Pebble</button>
      <button class='correct'>Douglas</button>
      <button class='incorrect'>Teetsy</button>
      <button class='incorrect'>Lewis</button>

      <p id='resultQ1'></p>

    </div>

    <div class="section">
      <h2>Part 2: Free Response</h2>
      <hr>
      <h3>Do you smell what The Rock is cooking?</h3>
      <input type='text' id="secondValue">
      <button id='check' class="input">Check answer</button>
      <p id='resultQ2'></p>
    </div>

  </div>
  
  
  
  
  
  <script>
    function Q1correct() {
        let correct = document.querySelector('.correct');
        correct.style.backgroundColor = 'green';
        document.querySelector('#resultQ1').innerHTML = 'Correct!';
      }

    function Q1wrong() {
      this.style.backgroundColor = 'red';
      document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
    }

    function Q2() {
      const secondValue = document.querySelector('#secondValue');
      const secondQ = document.querySelector('#check');
      
      if (secondValue.value.toLowerCase() == "yes") {
        secondQ.style.backgroundColor = 'green';
        document.querySelector('#resultQ2').innerHTML = 'Correct!';
      } 
      else {
        secondQ.style.backgroundColor = 'red';
        document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
      }
    }
    document.addEventListener('DOMContentLoaded', function() {
      let correct = document.querySelector('.correct');
      correct.addEventListener('click', Q1correct);

      let incorrects = document.querySelectorAll('.incorrect');
      incorrects.forEach(incorrect => incorrect.addEventListener('click', Q1wrong))

      let secondQ = document.querySelector('#check');
      secondQ.addEventListener('click', Q2);
    });

    </script>
</body>

NodeLists are not actually arrays. Still an issue of passing wrong argument to first listener also. `correct` is a node , not a function — charlietfl, Mar 27 '21 at 01:28
@zubairumatiya please check this link https://stackoverflow.com/a/24070373/5146848 You'll get a clear idea about that. — Sifat Haque, Mar 27 '21 at 07:56

score 0 · Answer 3 · answered Mar 27 '21 at 02:47

I updated your js code with some changes and comments. I've tested here and now it works.

//How you use it in more than one function Define it as a global var
let incorrects, correct;
function Q1correct() {

    correct.style.backgroundColor = 'green';
    document.querySelector('#resultQ1').innerHTML = 'Correct!';
}

function Q1wrong() {
     for (let i = 0; i < incorrects.length; i++) {
        incorrects[i].style.backgroundColor = 'red';
        document.querySelector('#resultQ1').innerHTML = 'Wrong :(';
    }

}

function Q2() {
    if (secondQ.value.toLowerCase() == "yes") {
        secondQ.style.backgroundColor = 'green';
        document.querySelector('#resultQ2').innerHTML = 'Correct!';
    }
    else {
        secondQ.style.backgroundColor = 'red';
        document.querySelector('#resultQ2').innerHTML = 'Wrong :(';
    }
}
document.addEventListener('DOMContentLoaded', function () {

    correct = document.querySelector('.correct');
    correct.addEventListener('click', Q1correct);

    //querySelectorAll returns an array, so we need to loop into it
    incorrects = document.querySelectorAll('.incorrect');
    incorrects.forEach(btn => {
        btn.addEventListener('click', Q1wrong)
    })

    let secondQ = document.querySelector('#check');
    secondQ.addEventListener('click', Q2);
});

Why are my buttons on javascript not responding when clicked?

3 Answers3