Блог

У меня есть функция на 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'>amp;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">amp;times;</span>
                          <p>Some text in the Modal..</p>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
  

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

У меня это работает при попытке инициализировать modal.js снова после reportsTable вызывается:

 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- напишите функцию для нажатия кнопки openmodal:

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

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

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

3- использовать для встроенного onclick на openmodal button и close button:

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

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

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