javascript / firebase - класс кнопки не работает при запуске цикла for

Question

У меня есть функция на JavaScript, которая извлекает данные из таблицы Firebase.Полученные данные будут добавлены к <tbody> в моем 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:

<div class="card-body">
            <div class="table-responsive">
              <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                  <tr>
                    <th>Category</th>
                    <th>Date</th>
                    <th>Location</th>
                    <th>Report</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>Category</th>
                    <th>Date</th>
                    <th>Location</th>
                    <th>Report</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </tfoot>
                <tbody id="table_body">
                  <tr>
                    <td>
                      <button class="openmodal myBtn">Open Modal</button>
                      <div class="modal myModal">
                        <div class="modal-content">
                          <span class="close">&times;</span>
                          <p>Some text in the Modal..</p>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

Я пытался добавить функцию onclick к своим кнопкам, но она по-прежнему не вызывает всплывающее окно.Я что-то упустил из своих кодов?

Answer 1

Я понял, что моя ошибка на самом деле вызвана тем, что файл modal.js завершился первым, прежде чем функция reportsTable закончила запуск.Мой обходной путь - удалить файл modal.js, поместить его содержимое в функцию в файле reportsTable.js и вызывать эту функцию каждые 1000 мс.

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

Answer 2

1 - написать функцию для нажатия кнопки openmodal:

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

2 - написать функцию для нажатия кнопки закрытия:

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

3 - использовать для встроенного нажатия кнопки openmodalи кнопка закрытия:

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

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

примечание: этим способом не нужно ждать, чтобы загрузить документ или обновить таблицу

Answer 3

Это работает для меня, когда я пытаюсь снова инициализировать modal.js после вызова reportsTable:

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