Menu
This problem seems to be common, though I couldn't find the answer.
I've got this simple html with the only canvas tag
<!doctype html>
<head>
<meta charset = "utf-8">
<script src="js/script.js"></script>
<title>Title</title>
</head>
<body>
<canvas id = "canvas"></canvas>
</body>
</html>
and in script.js I'm trying to catch window.onload event:
window.onload = init;
function init(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(50, 20, 150, 150);
}
But nothing happens. I assume that the html is loaded even before the first line of js executed.
So I found that the alternative to onload event would be to put script definition in the end of the body, so when script being executed the window is supposed to be loaded alreade. So I did like this:
<!doctype html>
<head>
<meta charset = "utf-8">
<!-- gone -->
<title>Title</title>
</head>
<body>
<canvas id = "canvas"></canvas>
<script src="js/script.js"></script> <!-- inserted -->
</body>
</html>
and
<!-- window.onload = init; -->
init() <!-- inserted -->
function init(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(50, 20, 150, 150);
}
And in a way it works (draws rectangle) , but gives me an error Uncaught ReferenceError: context is not defined.
So my question is what I'm doing wrong? I'm also wonderring if there is a better way to do this.
P.S. I tend not to use jquery...
EDITED: the error with context has nothing to do with the code above, although I still don't like the idea of putting the link to js file in the end of the body...
845
The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
window. onload = init(); assigns the onload event to whatever is returned from the init function when it's executed. init will be executed immediately, (like, now, not when the window is done loading) and the result will be assigned to window. onload .
ready() is a jQuery event which occurs when the HTML document has been fully loaded, while the window. onload event occurs later, when everything including images on the page loaded.
The onload executes a block of code after the page is completely loaded while ＄(document). ready(function) executes a block of code once the DOM is ready.
Here, try the following code. The key points being:
(1) You can assign more than 1 function to be run when the onload event fires. (2) You can attach them whereever you please. They all still get called when the attached event fires. However - I don't think there is a guarantee that functions will be executed in the same order that they were attached. Keep this in mind when attaching multiple functions to a single event using addEventListener.
Anyhow, the output is:
created with function called from **test.js**
created with function called from test.html
created with function called from **test.js**
test.html
<!doctype html>
<html>
<head>
<script src='test.js'></script>
<script>
window.addEventListener('load', mInlineJsLoadFunc, false);
function mInlineJsLoadFunc()
{
var div = document.createElement('div');
div.appendChild( document.createTextNode('created with function called from test.html') );
document.body.appendChild(div);
}
</script>
<style>
</style>
</head>
<body>
</body>
<script src='test.js'></script>
<html>
test.js
window.addEventListener('load', mExternalJsLoadFunc, false);
function mExternalJsLoadFunc()
{
var div = document.createElement('div');
div.appendChild( document.createTextNode('created with function called from **test.js**') );
document.body.appendChild(div);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
