Uncaught TypeError: submitBtn.addEventListner не является функцией - PullRequest
Новая
       1

Uncaught TypeError: submitBtn.addEventListner не является функцией

0 голосов
/ 29 мая 2020 
<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>
    </script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

 <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
 <script src="/__/firebase/7.14.5/firebase-app.js"></script>

 <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
 <script src="/__/firebase/7.14.5/firebase-analytics.js"></script>

 <!-- Add Firebase products that you want to use -->
 <script src="/__/firebase/7.14.5/firebase-auth.js"></script>
 <script src="/__/firebase/7.14.5/firebase-firestore.js"></script>
 <script src="/__/firebase/init.js"></script>
 <script src="bookingSubmit.js">    </script>

Это Html и JavaSript приведен ниже: 

var firebaseConfig = {
   apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
   authDomain: "hxxxxxxxxxxxx.firebaseapp.com",
   databaseURL: "https://xxxxxxxxx.firebaseio.com",
   projectId: "xxxxxxxxx",
   storageBucket: "xxxxxxxxx.appspot.com",
   messagingSenderId: "xxxxxxxxxxx",
   appId: "x:xxxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx",
   measurementId: "G-xxxxxxxxxx"
 };

//reference messages collection



var firestore =  firebase.firestore();

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


let email = document.querySelector('#email');
let packageFields = document.querySelector('#packageFields');
let name = document.querySelector('#name');
let phone = document.querySelector('#phone');
let date = document.querySelector('#date');

const db = firestore.collection("BookingData");

submitBtn.addEventListner('click', function(){
  let userEmailInput = email.value;
  let userPackageInput = packageFields.value;
  let userNameInput = name.value;
  let userPhoneInput = phone.value;
  let userDateInput = date.value;

  db.doc()
  .set({
    email:userEmailInput,
    package:userPackageInput,
    name:userNameInput,
    phone:userPhoneInput,
    date:userDateInput
  })
  .then(function(){
    console.log("Data Saved");
  })
  .catch(function(error){
    console.log(error);
  });
});

Я пытаюсь сохранить данные моей контактной формы в firebase. Но это дает ошибку

Uncaught TypeError: submitBtnis null at bookingSubmit. js: 27

Я помещаю сценарий в конец, тогда почему он дает это ошибка?

В чем его причина и как решить ... ??

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Вы должны добавить идентификатор к вашему элементу, а не класс. 

 <button type="submit" id="signupbtn" class="signupbtn">Confirm Booking</button>
 const submitBtn = document.querySelector("#signupbtn");

Также есть опечатка в addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Это должно быть 

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

   //Remove default form submit behaviour.
   e.preventDefault();
   //...

, а не 

submitBtn.addEventListner('click', function(){ //Typo in addEventListner
.
1 голос
/ 29 мая 2020

Вы используете: 

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

для выбора 

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

Вам нужно либо выбрать на основе имени класса: ".signupbtn", либо установить идентификатор, а не класс, в элемент.

...