为什么我的 javascript 上的按钮在单击时没有响应？答案

【问题标题】：Why are my buttons on javascript not responding when clicked?为什么我的 javascript 上的按钮在单击时没有响应？
【发布时间】：2021-03-27 01:04:21
【问题描述】：

Idk 出了什么问题，我尝试将 id 添加到按钮，但也没有用，所以我只是回到使用 querySelect 中的按钮类。我也尝试使用 onclick 仍然没有响应。该按钮应该在单击时变为绿色或红色，具体取决于它是否正确。开发者工具也没有错误。

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

【问题讨论】：

您在"DOMContentLoaded" 中有错字。注意"DOM"的大写
已更改。按钮仍然不响应点击。
为什么说“开发者工具也没有错误”？在显示已发布代码和标记的浏览器中打开控制台显示 Uncaught TypeError: incorrects.addEventListener is not a function
问题是由错误的脚本tag syntax引起的吗？ < scrpt > 和 <\n/script> 不是有效的 HTML 标记。

标签： javascript html button cs50

【解决方案1】：

正确的事件名称是“DOMContentLoaded”。你正在写“DomContentLoaded”。

【讨论】：

酷。我这样做了，但按钮仍然没有响应。

【解决方案2】：

我用一些更改和 cmets 更新了您的 js 代码。我在这里测试过，现在可以了。

//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);
});

【讨论】：

【解决方案3】：

首先你有一个错字'DOMContentLoaded'。

您还需要将事件侦听器附加到单个项目。相反，您已将点击侦听器附加到 NodeLists，这将不起作用。

您还在DOMContentLoaded 中声明了一些变量，并在其他函数中使用了它们。由于功能范围，这当然行不通。

您可以检查此工作代码以获得一些想法。

<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 实际上不是数组。仍然是将错误的论点传递给第一个听众的问题。 correct 是一个节点，而不是一个函数
我有必要把
@zubairumatiya 请检查此链接stackoverflow.com/a/24070373/5146848 你会对此有一个清晰的了解。