0
321
ViewsGetting Javascript error: "Uncaught TypeError: document.getElementById(...) is null"
I've been scratching my head for a while now, I'm a novice with Javascript, but this is a first for me. Here is some very simple html and javascript code that's causing the error in the title:
<!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">
<script>
document.getElementById("game-column").innerHTML = "test";
</script>
</head>
<body>
<div id="game-container">
<div id="card-column" name="card-column"></div>
<div id="game-column" name="game-column"></div>
</div>
</body>
</html>
I'm mainly using firefox for testing.
For some reason it's complaining in the console when I refresh the webpage, however when I run the JS command in the console it seems to work fine. See image below.
Thanks for any responses.
·
Juan Pablo Isaza
2 answers
Answer question0
This is probably happening because your DOM isn't loaded before your JavaScript is executed. See here for an explanation and solution: https://javascript.info/onload-ondomcontentloaded. Alternatively, you could move your javascript to below your HTML!
·
Juan Pablo Isaza
Report
0
add the script to the bottom instead:
like this:
<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" />
</head>
<body>
<div id="game-container">
<div id="card-column" name="card-column"></div>
<div id="game-column" name="game-column"></div>
</div>
<script>
document.getElementById("game-column").innerHTML = "test";
</script>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question