I am getting the following Error
Error: Uncaught TypeError: Cannot read property 'innerHTML' of null at script.js:1
I have tried everything I could think of but nothing works.
var canvas = document.getElementById("can").innerHTML;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas
</body>
</html>I am getting the following Error
Error: Uncaught TypeError: Cannot read property 'innerHTML' of null at script.js:1
I have tried everything I could think of but nothing works.
var canvas = document.getElementById("can").innerHTML;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas
</body>
</html>-
1
Your script appears in the document before the
<canvas>element, so when the script runs the canvas is not in the DOM. – Pointy Commented Nov 23, 2017 at 14:20 -
2
also there's problem here :
</canvas– Barbaros Özhan Commented Nov 23, 2017 at 14:22 - 1 Possible duplicate of Where should JS scripts go in an HTML file? – user247702 Commented Nov 23, 2017 at 14:23
- Another possible duplicate containing useful info (although the first one I linked might be easier for OP to understand): Where should I put <script> tags in HTML markup? – user247702 Commented Nov 23, 2017 at 14:25
-
2
How to approach such issues: Your error says that
getElementById("can")returnsnull. According to MDN, this indicates that "element with the specified ID is not in the document" at the time that method was called. You will then be able to search on stackoverflow for that specific issue and find that your JavaScript must not run before the DOM or rather that specific element has been loaded. – le_m Commented Nov 23, 2017 at 14:26
3 Answers
Reset to default 31. Script error when using canvas
Use
var canvas = document.getElementById("can");Not
var canvas = document.getElementById("can").innerHTML();
See W3C - Canvas
2. Add an event listener when the document is ready, then execute your script
See W3C - DOM Event Listener example
function doSomething() {
var canvas = document.getElementById("can");
var ctx = canvas.getContext('2d');
/*
another scripts...
*/
}
window.addEventListener('onload', doSomething, false);
Okay there are two serious errors.
- You're trying to get the element before the DOM is fully loaded. Therefore the
canvasnote is not reachable. See addEventListener and DOMContentLoaded. - Remove
.innerHTML. getContext appends on the node not on the content.
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 200);
});<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas>
</body>
</html>There are two things.
First, you don't need .innerHTML as other answers stated.
Second, you either have to run you script at the window load event like so:
window.addEventListener('load', function () {
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);
});
Or you should load the javascript after the canvas tag.