РЕШИТЬ!Почему ничего не отправляется в Google Firebase?

Question

, поэтому я даже не знаю, как описать проблему, все, что я могу сказать, что, когда я нажимаю на кнопку «ОТПРАВИТЬ» при первой отправке пустых данных в базу данных Google, но когда я обновляю страницу, данные отправляются автоматически (см. VID, если вы проиграли, 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);
});

Answer 1

Добавьте свой код в DOMContentLoaded событие:

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

Из документов :

Событие DOMContentLoaded срабатывает, когда исходный HTMLдокумент полностью загружен и проанализирован, не дожидаясь окончания загрузки таблиц стилей, изображений и подкадров.

В настоящее время, когда вы нажимаете submit в первый раз, DOM все еще не полностьюзагружен, и поэтому вы получаете пустые строковые значения.