Why isn't the event fired when I load the document?

Question

// I'm trying to create div elements using a FOR loop but the event is not fired, although I found a solution, I wanna know why the event isn't fired 


    // load event here is not fired

        document.addEventListener('load', () => {
            for (i = 0; i <= 32; i++) {
                let gridSquare = document.createElement('div');
                gridSquare.className = 'grid-square'
               
                document.querySelector('.container').appendChild(gridSquare);
                console.log(gridSquare,i)
            
            }
            
           
        });
   

// Random Text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/style.css">
  <title>Javascript Test run</title>
</head>
  <body>
    <header>
      <h1 class="h1">Etch-A-Sketch</h1>
    </header>
    
    <main>

 <--! Therefore DOM elements aren't created inside this div !-->

      <div class="container"></div>
    </main>

    </div>


  <script src="/main.js"></script>
</body>
</html>
 
// Random Text

Usually the native `load` listener doesn't fire when the event has been assigned after the load event has already fired. In your case, `document` doesn't listen the said event, it's an event of `window` and some other elements loading external resources. — Teemu, Jun 01 '21 at 11:39
Try to check if your script is called by adding console.log or alert before the addEventListener — Dani, Jun 01 '21 at 11:48
And what was the solution you found? Are you sure `/main.js` is the correct source? Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. The dev tools provide a **Network** tab. Please confirm: Is the resource _found_ (e.g. HTTP 200 response)? If not, which _actual URL_ is requested? — Sebastian Simon, Jun 01 '21 at 11:54
Does this answer your question? [Why doesn't document.addEventListener('load', function) work in a greasemonkey script?](https://stackoverflow.com/questions/16404380/why-doesnt-document-addeventlistenerload-function-work-in-a-greasemonkey-s) — Sebastian Simon, Jun 01 '21 at 11:54
@SebastianSimon I used 'DOMContentLoaded' instead of 'load' and it worked and yes I'm sure /Main.js is the correct source and yes I can see the resource in the Networks Tab — J_SIRTHIK, Jun 01 '21 at 12:05

score 0 · Accepted Answer · answered Jun 01 '21 at 12:54

Try with window.onload

window.onload = () => {
        for (i = 0; i <= 32; i++) {
            let gridSquare = document.createElement('div');
            gridSquare.className = 'grid-square'
           
            document.querySelector('.container').appendChild(gridSquare);
            console.log(gridSquare,i)
        
        }
    }

Why isn't the event fired when I load the document?

1 Answers1