Javascript 使用innerhtml、html和js在教科书内部的html页面上显示从firebase实时数据库读取的数据

我正在尝试用html和javascript编写代码，当输入患者姓名并按下搜索按钮时，这些代码将显示每个患者的firebase实时数据库中的数据。数据应显示在html页面上为每个数据字段指定的文本框中。我不熟悉firebase和javascript。基本上，我正在尝试从firebase检索数据，并使用innerhtml将其显示在html上…我被卡住了：（…请帮助。提前感谢：）

search.addEventListener('click', (e) => {
    e.preventDefault();

    var userDataRef = firebase.database().ref("patients").orderByKey();
    userDataRef.once("value").then(function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        var key = childSnapshot.key;
        var childData = childSnapshot.val();              

        var date = childSnapshot.val().Date;
        var dname = childSnapshot.val().Disease;

        var sympt_time1=snapshot.val().Symp_Time_1;
        var symptom1=snapshot.val().Symptom_1;

        var sympt_time2=snapshot.val().Symp_Time_2;
        var symptom2=snapshot.val().Symptom_2;

        var sympt_time3=snapshot.val().Symp_Time_3;
        var symptom3=snapshot.val().Symptom_3;

        var sympt_time4=snapshot.val().Symp_Time_4;
        var symptom4=snapshot.val().Symptom_4;

        var med_time1=snapshot.val().Med_Time_1;
        var medicine1=snapshot.val().Medicine_1;

        var med_time2=snapshot.val().Med_Time_2;
        var medicine2=snapshot.val().Medicine_2;

        var med_time3=snapshot.val().Med_Time_3;
        var medicine3=snapshot.val().Medicine_3;

        var med_time4=snapshot.val().Med_Time_4;
        var medicine4=snapshot.val().Medicine_4;

        document.getElementById("date").innerHTML=date;
        document.getElementById("dname").innerHTML=dname;

        document.getElementById("sympt_time2").innerHTML=sympt_time2;
        document.getElementById("symptom2").innerHTML=symptom2;

        document.getElementById("sympt_time3").innerHTML=sympt_time3;
        document.getElementById("symptom3").innerHTML=symptom3;

        document.getElementById("sympt_time4").innerHTML=sympt_time4;
        document.getElementById("symptom4").innerHTML=symptom4;

        document.getElementById("med_time1").innerHTML=med_time1;
        document.getElementById("medicine1").innerHTML=medicine1;

        document.getElementById("med_time2").innerHTML=med_time2;
        document.getElementById("medicine2").innerHTML=medicine2;

        document.getElementById("med_time3").innerHTML=med_time3;
        document.getElementById("medicine3").innerHTML=medicine3;

        document.getElementById("med_time4").innerHTML=med_time4;
        document.getElementById("medicine4").innerHTML=medicine4;

    [enter image description here][1]
  
 });
}