javascript - 未捕获的类型错误 : input. addEventListener 不是函数

Question

首先，我选择了联系表单容器内的所有输入标签，然后添加了点击事件监听器并调用了一个函数。那是行不通的。

它抛出一个错误说: 未捕获的类型错误:input.addEventListener 不是函数。

<div class="form-container">
    <h1>SEND US A MESSAGE</h1>
    <div class="form">
      <input type="text" placeholder="Full Name">
      <input type="text" placeholder="E-Mail">
      <textarea name="Message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
      <button><i class="fa fa-paper-plane" aria-hidden="true"></i>SEND</button>
    </div>
  </div>

.form-container {
  margin: 5rem 0;
  height: auto;
  // text-align: center;

  h1 {
    color: $header-main;
    font-size: 2rem;
    text-align: center;
  }

  .form {
    input[type="text"],
    textarea,button {
      display: block; 
      margin: 2rem auto;
      width: 600px;
      padding: 1rem;
      border-radius: 1rem;
      border: 2px solid #d6cfcf;
      outline: none;
    }
  }
}

<script>

    // contact form

    const input = document.querySelectorAll('.form-container input');

    input.addEventListener('click', function () {
      console.log('che che che');
    });

  </script>

Answer 1

根据 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

document.querySelectorAll 返回一个 nodeList，它是一个数组。所以你不能以这种方式将 eventListener 分配给所有的人。你必须

input.forEach( inp => inp.addEventListener(...))