Firebase保存数据

Question

我是创建数据库的新手，
所以我有一些用户需要填写的输入。 预定时间，喜欢美发师之类的东西。 所以当我按书时我得到一个错误。 我真的不明白为什么会发生错误？ 因此，如果您能解释为什么会这样。

---

控制台错误：

未捕获的TypeError：无法读取null的属性“值”
在书上（app.js：23）
在HTMLInputElement.onclick（index.html：22）

js文件中的在线错误

未捕获的TypeError：无法读取null的属性“值”

---

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
  <script src="p5/p5.js"></script>
  <script src="p5/addons/p5.dom.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <input type='text' id='inputName' placeholder='full name' style='width:124px;' required>
  <input type='text' id='inputTelefon' placeholder='Telefon number' required>
  <br><br>
  <input type='datetime-local' id='inputDate'>
  <br><br>
  <textarea id='inputMessage' cols='41' rows='10' placeholder='message here...'></textarea>
  <br><br>
  <input onclick="book()" type='button' id='bookBtn' value='Book' style='float:left;font-size:22px;'>
</body>
</html>

JavaScript的：

var inputName = document.getElementById('inputName');
var inputTelefon = document.getElementById('inputTelefon');
var inputDatoOgTid = document.getElementById('inputDate');
var inputBesked = document.getElementById('inputMessage');
var bookBtn = document.getElementById('bookBtn');
var database;

function setup() { 
  var config = {
    apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
    authDomain: "okay-5d12f.firebaseapp.com",
    databaseURL: "https://okay-5d12f.firebaseio.com",
    projectId: "okay-5d12f",
    storageBucket: "okay-5d12f.appspot.com",
    messagingSenderId: "731997792130"
  };
  firebase.initializeApp(config);
  database = firebase.database();
}

function book() {
  var data = {
    name: inputName.value(),
    telefon: inputTelefon.value(),
    dateAndTime: inputDatoOgTid.value(),
    message: inputBesked.value()
  }
  console.log(data);
  var ref = database.ref('bookings');
  ref.push(data);
}

Answer 1

尝试将您的JavaScript代码放入：

window.onload = function() {
  //Your code here
};

由于您编写的JavaScript可能在加载DOM之前就已触发，因此它将找不到您尝试获取的元素。

Answer 2

因此，我修复了该错误。 我将var data = {}更改为新书功能。 （HTML相同）

---

JavaScript的：

var inputName; //= document.getElementById('inputName');
var inputTelefon; //= document.getElementById('inputTelefon');
var inputDatoOgTid; //= document.getElementById('inputDate');
var inputBesked; //= document.getElementById('inputMessage');
var database;

function setup() { 
  var config = {
    apiKey: "AIzaSyAJIAVkPZb6AzuezA0POkGdbkX2HDVnGPs",
    authDomain: "okay-5d12f.firebaseapp.com",
    databaseURL: "https://okay-5d12f.firebaseio.com",
    projectId: "okay-5d12f",
    storageBucket: "okay-5d12f.appspot.com",
    messagingSenderId: "731997792130"
  };
  firebase.initializeApp(config);
}

function book() {
  var inputName = document.getElementById('inputName').value;
  var inputTelefon = document.getElementById('inputTelefon').value;
  var inputDatoOgTid = document.getElementById('inputDate').value;
  var inputBesked = document.getElementById('inputMessage').value;

  var data = {
    name: inputName,
    telefon: inputTelefon,
    dateAndTime: inputDatoOgTid,
    message: inputBesked 
  }
  database = firebase.database();
  var ref = database.ref('bookings');
  ref.push(data);
  console.log(data);
}