javascript/firebase - Button class does not work when triggered with for loop

firebase realtime database triggers example
firebase console
firebase listen for changes
firebase get data by key javascript
firebase cloud functions triggers
firebase get all child keys javascript
firebase database triggers
firebase database javascript example

I have a function on JavaScript that fetches data from a firebase table. The fetched data will be appended to a <tbody> in my HTML. When the button (functioning as a popup-modal opener) is spawned in using HTML normally, the button works as intended (even if multiple instances of it are created), but when it is spawned using the script, it fails to work, even if a single button is used.

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 (used for fetching the data, and appending it to the table)

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>

I have tried adding a onclick function to my buttons, but it still doesn't trigger the popup. Am i missing anything from my codes?

It works for me when trying to initialize the modal.js again after the reportsTable is called:

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

Database Triggers, Test with the Firebase console � Test with the gcloud CLI � Run a Game Loop test In a typical lifecycle, a Firebase Realtime Database function does the following: If you do not specify an instance, the function deploys to the default Realtime return snapshot.ref.parent.child('uppercase').set(uppercase); });. index.js� Im doing a chat, and i want to check if there is already a user with same name, so that there could not be two users with same nick. This does not work, and i can add many same nicks.

I realized that my error is actually caused by the modal.js file finishing first before the reportsTable function finishes triggering. My workaround is removing the modal.js file, putting its contents in a function in the reportsTable.js file, and calling that function every 1000ms.

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

Retrieving Data, Firebase data is retrieved by either a one time call to GetValueAsync() or This does make your database open to anyone, even people not using your app, This event is triggered once when the listener is attached and again every time the You can use the Realtime Database Query class to retrieve data sorted by key,� In a typical lifecycle, a Firebase Realtime Database function does the following: Waits for changes to a particular Realtime Database location. Triggers when an event occurs and performs its tasks (see What can I do with Cloud Functions? for examples of use cases).

1- write a function for openmodal button click:

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

2- write a function for close button click:

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

3- use to inline onclick on openmodal button and close button:

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

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

note: by this way dont need wait to load documnet or refresh table

Firebase: Reading Data and Event Listeners, This method is triggered once when the listener is attached and again every time If the Event can not be completed, a second callback method, onCancelled() is called. public class MainActivity extends AppCompatActivity implements View. in the dataSnapshot , loop through each of the children with the getChildren()� Firebase does not have built in pagination. Firebase collections are meant to be consumed as streams of data, so imagine running a query like fruitRef.orderByKey().limitToLast(3).on(‘child_added’, callback). Your callback will get called three times, once for each of the last three results.

Learn Firebase CRUD App With JavaScript NOW – 02 Add, Update , In this Firebase CRUD JavaScript Web Tutorial, you will be learning how to do CREATE, <input type='text' data-key='email' class='user-input'><br> <button type='button' the config object with your own credentials otherwise your app will NOT work. Now, Loop though addUserInputsUI array that has three input fields. Reference for JavaScript SDK. Overview; auth:import and auth:export; Firebase Realtime Database Operation Types

Upgrading Your Maps JavaScript API Application from V2 to V3, your code with the Closure Compiler, or to trigger autocomplete in your IDE. Client IDs are still supported in Maps JavaScript API v3 and do not need to go Google Maps APIs for Work customers should use a client parameter. Below are some examples of the equivalent classes in v2 and v3. This does make your database open to anyone, even people not using your app, so be sure to restrict your database again when you set up authentication. Reading and writing lists Append to a list of data. Use the push() method to append data to a list in multiuser applications.

How to step through your code | Chrome DevTools, This pauses all JavaScript on the page, focus shifts to the DevTools Sources Step through code to observe issues before or while they happen and test out All step options are represented through clickable icons Breakpoints button bar that would otherwise continually pause the code, e.g., a breakpoint inside a loop. Firebase utilizes listeners to watch for changes in a specified node. It is similar to an event handler in the sense that a code is triggered based on a certain circumstance. In our case, whenever changes in that node's data occur, the listener automatically provides the application updated data, called a snapshot. The application can then use