首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Found null不是对象(评估document.getElementById('ConForm').addEventListener('submit',submitForm

Found null不是对象(评估document.getElementById('ConForm').addEventListener('submit',submitForm
EN

Stack Overflow用户
提问于 2019-04-12 02:32:13
回答 2查看 123关注 0票数 0

我在提交表格的时候发现了这个

我可以做些什么来使我的提交成功

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

对我来说最好提供完整的代码

我是一个编程的初学者。

我删除了许多选项,因为它太多的代码和太少的细节

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

代码语言:javascript
复制
            <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

代码语言: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,

 })
  }
EN

回答 2

Stack Overflow用户

发布于 2019-04-12 02:37:34

在声明函数submitForm之前,您正在使用它。JS是解释的,而不是编译的,这意味着定义顺序很重要。

在使用document.getElementById('ConForm').addEventListener('submit',submitForm);之前定义函数function submitForm(e){...}

代码语言:javascript
复制
//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);
票数 0
EN

Stack Overflow用户

发布于 2019-04-12 02:53:58

在使用javascript之前,必须确保所有HTML都已加载并准备就绪。

基本上你必须在html后面插入你的脚本。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55639078

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档