Найденный null не является объектом (оценка document.getElementById(‘ConForm’).addEventListener(‘submit’, submitForm

#javascript #firebase

#javascript #firebase

Вопрос:

Я нашел это, когда отправлял свою форму

что я могу сделать, чтобы моя отправка прошла успешно

это работает нормально, когда я использую тип ввода = текст

для меня лучше предоставить полный код

Я новичок в программировании.

Я удалил многие опции, поскольку в них слишком много кодов и слишком мало деталей

Я не нашел ошибки в своей консоли, но данные по-прежнему не могут быть отправлены в базу данных firebase

             <form id="ConForm">
            <Label class="red">amp;nbsp學生稱呼:</Label>
            <input type="text" name="name" id="name"><br>
                <Label class="red">amp;nbsp性別:</Label>

               <select name="sex1" id="sex1" >
                 <option value="男">男</option>
                 <option value="女">女</option>
               </select><br>

                <Label class="red">amp;nbsp就讀年級:</Label>

                <select name="year" id="year">
                        <option value="幼稚園">幼稚園</option>
                        <option value="小一">小一</option>


                </select><br>
                <Label class="red">amp;nbspWhatsapp號碼:</Label>
                <input type="number" name="phone" placeholder="將以此電話進行聯絡" id="phone"><br>
                <Label class="red">amp;nbsp補習地區:</Label>
                <select name="location" id="location">
                    <option value="中西區">中西區</option>
                    <option value="灣仔區">灣仔區</option>



                </select><br>
                <Label class="red">amp;nbsp導師性別要求:</Label>

                <select name="sex2" id="sex2">

                  <option value="男">男</option>
                  <option value="女">女</option>
                </select><br>
                <Label class="red">amp;nbsp時薪hkd:</Label>

                <select name="salary" id="salary">
                        <option value="100-150">100-150</option>

                </select><br>
                <Label class="red">amp;nbsp每堂幾小時:</Label>

                <select name="hour" id="hour">
                        <option value="1.5">1.5</option>
                        <option value="2">2</option>

                </select><br>
                <Label class="red">amp;nbsp科目:</Label>

                <select name="subject" id="subject">
                        <option value="中國語文">中國語文</option>
                        <option value="英國語文">英國語文</option>


                    </select><br>
                <Label class="red">amp;nbsp補習時間:</Label>

                <select name="time" id="time">
                        <option value="星期一">星期一</option>
                        <option value="星期二">星期二</option>

                </select><br>
            <p class="full">
                <Label class="red">amp;nbsp其他要求:</Label>
                <textarea name="message" rows="2" id="message"></textarea>
            </p>


            <p class="full">
              amp;nbspamp;nbspamp;nbsp<Button type="submit">提交</Button><span>amp;nbspamp;nbspamp;nbsp  *按一下「提交」即表示您同意服務條款 和私隱政策</span><br>

            </p>

        </form>
        </div>
        </div>
  

javascript

 //Reference message collection
var messageRef = firebase.database().ref('posts');
//listen for form submit
  document.getElementById('ConForm').addEventListener('submit',submitForm);
//submit form
function submitForm(e){
e.preventDefault();
//get value
var name=getInputVal('name');
var sex1=getInputVal('sex1');
var sex2=getInputVal('sex2');
var location=getInputVal('location');
var salary=getInputVal('salary');
var hour=getInputVal('hour');
var subject=getInputVal('subject');
var time=getInputVal('time');
var year=getInputVal('year');
var phone=getInputVal('phone');
var message=getInputVal('message');



 //Save message
 saveMessage(name,year,phone,message,sex1,sex2
 ,location,salary,hour,subject,time);
 }
  //function to get form value
  function getInputVal(id){
  return document.getElementById(id).value;
  }

 //Save message to firebase
 function saveMessage(name,year,phone,message,sex1,
 sex2,location,salary,hour,subject,time){
 var newMessageRef = messageRef.push();
 newMessageRef.set({
 姓名: name,
 級別: year,
WhatsApp號碼: phone,
其他要求: message,
性別:sex1,
導師性別要求:sex2,
地區:location,
時薪:salary,
每堂幾小時:hour,
科目:subject,
補習時間:time,

 })
  }
  

Ответ №1:

Вы используете функцию submitForm до ее объявления. JS интерпретируется, а не компилируется, что означает, что порядок определения имеет значение.

Определите свою функцию function submitForm(e){...} перед ее использованием document.getElementById('ConForm').addEventListener('submit',submitForm);

 //Reference message collection
var messageRef = firebase.database().ref('posts');
//listen for form submit

//submit form
function submitForm(e) {
  e.preventDefault();
//get value
  var name = getInputVal('name');
  var sex1 = getInputVal('sex1');
  var sex2 = getInputVal('sex2');
  var location = getInputVal('location');
  var salary = getInputVal('salary');
  var hour = getInputVal('hour');
  var subject = getInputVal('subject');
  var time = getInputVal('time');
  var year = getInputVal('year');
  var phone = getInputVal('phone');
  var message = getInputVal('message');


  //Save message
  saveMessage(name, year, phone, message, sex1, sex2
      , location, salary, hour, subject, time);
}

//function to get form value
function getInputVal(id) {
  return document.getElementById(id).value;
}

//Save message to firebase
function saveMessage(name, year, phone, message, sex1,
                     sex2, location, salary, hour, subject, time) {
  var newMessageRef = messageRef.push();
  newMessageRef.set({
    姓名: name,
    級別: year,
    WhatsApp號碼: phone,
    其他要求: message,
    性別: sex1,
    導師性別要求: sex2,
    地區: location,
    時薪: salary,
    每堂幾小時: hour,
    科目: subject,
    補習時間: time,

  })
}

document.getElementById('ConForm').addEventListener('submit', submitForm);
  

Комментарии:

1. Это не проблема, это помогло бы сделать код более правильным, но он будет работать, даже если не реализован.

2. @Rsmusic ‘это будет работать, даже если [функция обработчика событий] не реализована’ на самом деле, в JS использование неопределенных функций приводит к ошибкам неопределенных функций: Uncaught ReferenceError: submitForm is not defined

3. К сожалению, вы ошибаетесь, просто протестируйте его в браузере.

Ответ №2:

Вы должны убедиться, что весь ваш HTML загружен и готов перед использованием javascript.

По сути, вам нужно вставить свой скрипт после вашего html.

Комментарии:

1. Спасибо, теперь вам нужно нажать зеленую кнопку слева от моего ответа для проверки 🙂