首页 > 解决方案 > 为什么没有发送到谷歌火力基地?

问题描述

所以我什至不知道如何描述这个问题,我只能说当我按下“提交”按钮第一次将空数据发送到谷歌数据库但是当我刷新页面时数据自动发送(如果你看视频丢失,https://imgur.com/a/D1ySswQ

----------我的代码------

let name = document.getElementById("name").value;
let medicName = document.getElementById("medic-name").value;
let medicTime = document.getElementById("medic-time").value;
let notes = document.getElementById("notes").value;

 var firebaseConfig = {
    apiKey: "AIzaSyB444udd_UeONooSUbjOplVqrElpHv4Hgc",
    authDomain: "my-first-project-9a87e.firebaseapp.com",
    databaseURL: "https://my-first-project-9a87e.firebaseio.com",
    projectId: "my-first-project-9a87e",
    storageBucket: "",
    messagingSenderId: "15533904472",
    appId: "1:15533904472:web:b260608b9c15e8f3"
  };
  firebase.initializeApp(firebaseConfig);
  let MedicalData = firebase.database().ref('Medical Data');

       document.getElementById("submit").addEventListener("click", function(event){
    event.preventDefault()
    var data = {
        name: name,
        MedicName: medicName,
        MedicTime: medicTime,
        Notes: notes
      }
    MedicalData.push(data);
  });

解决了! 所以我不知道发生了什么,甚至不知道为什么这解决了问题,但我将这部分代码从

document.getElementById("submit").addEventListener("click", function(event){
    event.preventDefault()
    var data = {
        name: name,
        MedicName: medicName,
        MedicTime: medicTime,
        Notes: notes
      }
    MedicalData.push(data);
  });

document.getElementById("submit").addEventListener("click", function (event) {
  event.preventDefault()
  var data = {
    name: document.getElementById("name").value,
    MedicName: document.getElementById("medic-name").value,
    MedicTime: document.getElementById("medic-time").value,
    Notes: document.getElementById("notes").value
  }
  MedicalData.push(data);
});

标签: javascriptfirebasefirebase-realtime-database

解决方案


DOMContentLoaded在事件中添加您的代码:

window.addEventListener('DOMContentLoaded', (event) => {
//add code here
});

文档

当初始 HTML 文档完全加载和解析时触发该DOMContentLoaded事件,无需等待样式表、图像和子框架完成加载。

目前,当您第一次单击submit时,DOM仍未完全加载,这就是您获得空字符串值的原因。


推荐阅读