javascript/firebase-按钮类在使用for循环触发时不工作

我在JavaScript上有一个从firebase表获取数据的函数。获取的数据将附加到my HTML中的。正常使用HTML生成作为弹出模式开启器的按钮时，即使创建了按钮的多个实例，该按钮仍能按预期工作，但使用脚本生成按钮时，即使使用单个按钮，该按钮也无法工作

modal.js：

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }

reportsTable.js用于获取数据并将其附加到表中

function reportsTable() {
  var rootRef = firebase.database().ref().child("reports");
  rootRef.on("value", snap => {
    $("#table_body").html("");
    snap.forEach(snap => {
      var Category = snap.child("Category").val();
      var Dates = snap.child("Date").val();
      var Location = snap.child("Location").val();
      var Report = snap.child("Report").val();
      var Status = snap.child("Status").val();
      $("#table_body").append("<tr><td>" + Category + "</td><td>" + Dates + "</td><td>" + Location + "</td><td>" + Report + "</td><td>" + Status + "</td><td>" +
        "<button class='openmodal myBtn'>View</button>" +
        "<div class='modal myModal'>" +
        "<div class='modal-content'>" +
        "<span class='close'>&times;</span>" +
        "<p>Report Category: " + Category + " </p>" +
        "<p>Report Date: " + Dates + " </p>" +
        "<p>Location: " + Location + " </p>" +
        "<p>Report Details: " + Report + " </p>" +
        "<p>Report Status: " + Status + " </p>" +
        "</div>" +
        "</div></td></tr>")
    })
  });
}

HTML:

---

我曾尝试在按钮中添加onclick功能，但它仍然不会触发弹出窗口。我的代码中是否缺少任何内容？

在调用reportsTable后再次尝试初始化modal.js时，它对我有效：

function refreshmodal(){
    //modal.js content
}
function reportsTable(){
    //.......codes
    refreshmodal();
}

---

我意识到我的错误实际上是由modal.js文件在reportsTable函数完成触发之前先完成导致的。我的解决方法是删除modal.js文件，将其内容放入reportsTable.js文件中的函数中，并每隔1000毫秒调用该函数

window.onload = reportsTable();
window.setInterval(function(){
  modalSpawner();
}, 1000);

---

1-为OpenModel按钮编写函数单击：

function showModal(btn){         
    btn.parentElement.getElementsByClassName("modal")[0].style.display = "block";
}

function hideModal(btn){         
    btn.closest(".modal").style.display = "none";
}

2-编写关闭按钮单击功能：

function showModal(btn){         
    btn.parentElement.getElementsByClassName("modal")[0].style.display = "block";
}

function hideModal(btn){         
    btn.closest(".modal").style.display = "none";
}

3-用于内联单击OpenModel按钮和关闭按钮：

<button class="openmodal myBtn" onclick="showModal(this);">Open Modal</button> 

<span class="close" onclick="hideModal(this);>&times;</span>

注意：这样就不需要等待加载documnet或刷新表