找到null不是对象（评估document.getElementById（'ConForm'）。addEventListener（'submit'，submitForm

Question

我在提交表单时发现了这一点

我该怎么做才能让我的提交成功

当我使用input type = text时它可以正常工作

我最好提供完整的代码

我是编码的初学者。

由于代码太多而细节太少，我删除了很多选项

我在控制台中发现没有错误，但数据仍然无法发送到firebase数据库

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

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

                <Label class="red">&nbsp就讀年級：</Label>

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


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



                </select><br>
                <Label class="red">&nbsp導師性別要求：</Label>

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

                  <option value="男">男</option>
                  <option value="女">女</option>
                </select><br>
                <Label class="red">&nbsp時薪hkd：</Label>

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

                </select><br>
                <Label class="red">&nbsp每堂幾小時：</Label>

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

                </select><br>
                <Label class="red">&nbsp科目：</Label>

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


                    </select><br>
                <Label class="red">&nbsp補習時間：</Label>

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

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


            <p class="full">
              &nbsp&nbsp&nbsp<Button type="submit">提交</Button><span>&nbsp&nbsp&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,

 })
  }

Answer 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);

Answer 2

在使用javascript之前，您必须确保已加载并准备好所有HTML。

基本上你必须在你的HTML之后插入你的脚本。