未捕获的类型错误： submitBtn.add事件列表不是一个函数

Question

<form class="modal-content" id="bookingForm">    <div class="formContainer">      <h1>Booking Form</h1>      <p>Please fill in this form to Book The Trip.</p>      <hr>      <label for="email"><b>Email</b></label>      <input type="text" placeholder="Enter Email" name="email" required id="email">      <label><b>Package</b></label>      <input type="text" id="packageFields" name="teste2">      <label for="psw"><b>Name</b></label>      <input type="text" placeholder="Enter Name" name="name" required id="name">      <label for="psw-repeat"><b>Phone No.</b></label>      <input type="tel" placeholder="Enter Phone No." name="psw-repeat" required id="phone">      <label for="psw-repeat"><b>Date Of Journey</b></label>      <input type="date" placeholder="Enter Phone No." name="psw-repeat" required id="date">      <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>      <div class="clearfix">        <button type="submit" class="signupbtn">Confirm Booking</button>        <button type="button" onclick="document.getElementById('bookingForm').style.display='none'" class="cancelbtn">Cancel</button>      </div>    </div>  </form>我正在尝试将我的联系人表单的数据存储在火库中。但它给出了错误未捕获的打字错误： 提交预订时为空提交.js：27我把脚本放在最后，那么为什么它给出这个错误？它的原因是什么，如何解决它...？？

Answer 1

您应该在元素上添加一个 id，而不是一个类。

 <button type="submit" id="signupbtn" class="signupbtn">Confirm Booking</button>

 const submitBtn = document.querySelector("#signupbtn");

此外，https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListeneraddEventListener

它应该是

submitBtn.addEventListener('click', function(e){

   //Remove default form submit behaviour.

   e.preventDefault();

   //... 

而不是

submitBtn.addEventListner('click', function(){ //Typo in addEventListner

Answer 2

您正在使用：

const submitBtn = document.querySelector("#signupbtn");

以选择

<button type="submit" class="signupbtn">Confirm Booking</button>

您需要根据类名进行选择：或者在元素上设置 ID 而不是类。".signupbtn"