Javascript 点击事件监听器未触发

Question

我正在尝试制作一个计算器，我需要将点击事件分配给输入。然而，我对 JavaScript 很陌生，我无法弄清楚为什么它不起作用。

onLoad = function assign() {
  var C = document.querySelectorAll('.click');

  for (i = 0; i < C.length; i++) {
    C[i].addEventListener('click');
    alert('bob');
  }
}

<div style="max-width: 960px; margin: 0px auto; background-color: green;">
  <section id="cal-container">
    <form name="calculator">
      <input type="text" name="answer">
      <br>

      <input class="click" id="1" type="button" value=" 1 ">
      <input class="click" id="2" type="button" value=" 2 ">
      <input class="click" id="3" type="button" value=" 3 ">
      <input class="click" id="+" type="button" value=" + ">
      <br>

      <input class="click" id="4" type="button" value=" 4 ">
      <input class="click" id="5" type="button" value=" 5 ">
      <input class="click" id="6" type="button" value=" 6 ">
      <input class="click" id="-" type="button" value=" - ">
      <br>

      <input class="click" id="7" type="button" value=" 7 ">
      <input class="click" id="8" type="button" value=" 8 ">
      <input class="click" id="9" type="button" value=" 9 ">
      <input class="click" id="*" type="button" value=" * ">
      <br>

      <input class="click" id="v" type="button" value=" C ">
      <input class="click" id="0" type="button" value=" 0 ">
      <input class="click" id="=" type="button" value=" = ">
      <input class="click" id="/" type="button" value=" / ">
      <br>
    </form>
  </section>
</div>

Answer 1

通常，您的脚本标记应该位于您的正文标记内。

您可能想要使用 window.onload 而不仅仅是 onLoad ，还要注意小写的 L。

最后，当使用addEventListener时第二个参数应该是一个函数，每当触发事件时就会调用该函数。

window.onload = function assign() {
  var C = document.querySelectorAll('.click');

  for (i = 0; i < C.length; i++) {
    C[i].addEventListener('click', function() {
      alert('bob');
    });
  }
}

<div style="max-width: 960px; margin: 0px auto; background-color: green;">
  <section id="cal-container">
    <form name="calculator">
      <input type="text" name="answer">
      <br>

      <input class="click" id="1" type="button" value=" 1 ">
      <input class="click" id="2" type="button" value=" 2 ">
      <input class="click" id="3" type="button" value=" 3 ">
      <input class="click" id="+" type="button" value=" + ">
      <br>

      <input class="click" id="4" type="button" value=" 4 ">
      <input class="click" id="5" type="button" value=" 5 ">
      <input class="click" id="6" type="button" value=" 6 ">
      <input class="click" id="-" type="button" value=" - ">
      <br>

      <input class="click" id="7" type="button" value=" 7 ">
      <input class="click" id="8" type="button" value=" 8 ">
      <input class="click" id="9" type="button" value=" 9 ">
      <input class="click" id="*" type="button" value=" * ">
      <br>

      <input class="click" id="v" type="button" value=" C ">
      <input class="click" id="0" type="button" value=" 0 ">
      <input class="click" id="=" type="button" value=" = ">
      <input class="click" id="/" type="button" value=" / ">
      <br>
    </form>
  </section>

</div>