How do I execute code after page is loaded?

Question

How do I make the following code load once the page is loaded?

I tried making it an entire new function but it didn't work, can someone help me

document.getElementById("ano").addEventListener("change", function(a) {
        const tbody = document.getElementById('tbody_calendario_jogos')
        while (tbody.firstChild) {
            console.log(tbody.firstChild)
            tbody.removeChild(tbody.firstChild)
        }


        for (key in jogos) {
            const anoSelect = new RegExp(`${a.target.value}`)
            const data = anoSelect.exec(jogos[key].Data)
            if (data != null) {
                const obj = jogos[key]
                const tr = document.createElement('tr')

                const tdTemporada = document.createElement('td')
                tdTemporada.textContent = obj.Temporada

                const tdLocal = document.createElement('td')
                tdLocal.textContent = obj.Local

                const tdMais = document.createElement('td')
                tdMais.textContent = obj.Mais


                tr.appendChild(tdTemporada)
                tr.appendChild(tdLocal)
                tr.appendChild(tdMais)
                tbody.appendChild(tr)
            }
        }
    })

wrap it inside: `document.addEventListener('DOMContentLoaded`, ()={ HERE }` — Randy Casburn, Feb 05 '19 at 16:52

ADuboisForge · Accepted Answer · 2019-02-06T03:31:18.257

1

You can use a simple init statement to execute the code after the page loads:

function init() {
  //your code here
}


window.onload = init;

edited Feb 06 '19 at 03:31

answered Feb 05 '19 at 16:54

ADuboisForge

121
6

typo on `windown` – Tatarin Feb 05 '19 at 19:48

score 1 · Answer 2 · answered Feb 05 '19 at 16:57

Just move your function outside the event listener and change it to a name function so you can reference the function name and load the function on page load as well as when the change listener is invoked by your #ano element like this:

function someFunc(a) {
  const tbody = document.getElementById('tbody_calendario_jogos')
  while (tbody.firstChild) {
    console.log(tbody.firstChild)
    tbody.removeChild(tbody.firstChild)
  }
  for (key in jogos) {
    const anoSelect = new RegExp(`${a.target.value}`)
    const data = anoSelect.exec(jogos[key].Data)
    if (data != null) {
      const obj = jogos[key]
      const tr = document.createElement('tr')

      const tdTemporada = document.createElement('td')
      tdTemporada.textContent = obj.Temporada

      const tdLocal = document.createElement('td')
      tdLocal.textContent = obj.Local

      const tdMais = document.createElement('td')
      tdMais.textContent = obj.Mais


      tr.appendChild(tdTemporada)
      tr.appendChild(tdLocal)
      tr.appendChild(tdMais)
      tbody.appendChild(tr)
    }
  }
}

someFunc(); // will load on page load
document.getElementById("ano").addEventListener("change", someFunc); // will load when `ano` element invokes the change listener

Check and run the following Code Snippet for a practical example of the above approach:

function someFunc() {
  alert("function loaded!!")
}
    
someFunc(); // will load on page load
document.getElementById("ano").addEventListener("click", someFunc); // will load when `ano` element invokes the change listener

<button id="ano">Click Me</button>

Sam · Answer 3 · 2019-02-05T19:49:39.213

Try putting it in self-revoking function instead of change function. Whatever you define inside of the change function will NEVER be called when the page loads. Depending on where and when you want the code to be called, placing it in the appropriate location of the page such as inside of the <head></head> tag, right after opening <body> tag, or at the end of the closing </body> tag.

(function () { // Your code })();

How do I execute code after page is loaded?

3 Answers3