unable to inject divs into html via javaacript-CodePudding

I am trying to create a simple etch a sketch game. i have started by creating a function that should inject a no. of divs into the html page but when it does. not seem to inject it for some reason.

let container = document.getElementById('container');

function getGrid(gridNumber) { 
for (let i = 0; i <= gridNumber * gridNumber; i  ) 
{
    const row = document.createElement('div');
    row.style.border = '1px solid red'
    container.appendChild(row).classList.add('box');
}
}

getGrid(16);


<!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">
    <title>Etch-a-Sketch</title>
    <link rel = "stylesheet" href="style.css">
    <script src="app.js"> </script>
</head>
<body>

<div > 
    <div > 
        <h1> Etch-a-Sketch </h1>
    </div>
    
</div>


<div id="container"> </div>


</body>
</html>

CodePudding user response：

Either you do document.getElementById or document.querySelector, not both.

let container = document.getElementById('container');

function getGrid(gridNumber) {
  for (let i = 0; i <= gridNumber * gridNumber; i  ) {
    const row = document.createElement('div');
    row.style.border = '1px solid red'
    container.appendChild(row).classList.add('box');
  }
}

getGrid(16);

<div id="container"></div>

CodePudding user response：

When the HTML parser reaches a <script> tag, by default the JavaScript is executed immediately - before any HTML below is being parsed. As a result, the element <div id="container"></div> does not exist yet when the script is looking for it and the call to getElementById('container') returns null.

The simpler way to deal with this issue is to put any script referring to DOM elements - at the end of the HTML, right above the ending </body> tag.
This appraoch, however, has a drawback when it comes to external scripts like the app.js in this case - the request for the file would not be sent to the server until the parser reaches the tag, so the execution of the script might be delayed.
Another method is to make the code to wait for the window.DOMContentLoaded event, which fires immediately when the DOM is being fully parsed and constructed, even before other aspects of the page loading (such as fecthing images) are done.

window.addEventListener('DOMContentLoaded', (event) => {
    // any code that refers to DOM elements
});

This approach has the opposite drawback when it comes to external scripts - the page parsing would halt until the script is being loaded and executed.

The third method, which is probably the best one for external script, is adding the defer attribute. For example:
<script src="app.js" defer />
This will cause the script to be requested asynchronously - not blocking the page loading, and also to only be executed once the DOM is being fully constructed - right before the DOMContentLoaded event is fired.