Document 'load' event callbacks not called; how did I mess this up? - javascript

In this HTML document, in Chrome, none of my load event callbacks are called:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
console.log('just checking');
function someFunction () { console.log('test 3'); }
document.addEventListener('load', () => console.log('test 1'));
document.addEventListener('load', function () { console.log('test 2'); });
document.addEventListener('load', someFunction);
</script>
</head>
<body>
</body>
</html>
However, I can see that they are set in the inspector:
And there are no errors in the console.
I am almost certain this is some trivial error on my part, and I can't figure out what it is.
I spent a fair amount of time searching the internet for reasons, but for the most part every post I found about failed load callbacks generally had to do with accessing the DOM before it was ready, which doesn't really apply here.
I hand-wavily tried setting the defer attribute on the script but it had no effect.
What am I missing here... ?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function docReady(func) {
document.addEventListener("DOMContentLoaded", function (event) {
func(event);
});
}
function someFunction () { console.log('test 3'); }
docReady(() => console.log('test 1'));
docReady(function () { console.log('test
2'); });
docReady(someFunction);
</script>
</head>
<body>
</body>
</html>
use 'DOMContentLoaded' instead 'load'

Related

addEventListener ' load ' event isn't triggered

in my JS code an EventListener is not trigger when i load my webpage. what could be the problem?
window.addEventListener('load', function () {
evaluate = 0;
if (firstD.checked) {
evaluate++
}
if (secondD.checked) {
evaluate++
}
if (thirdD.checked) {
evaluate++
}
})
https://codepen.io/haluk-mit-boray/pen/OJbbzLd
I created a quick example on usage, hope it helps as reference, or maybe you can add more context to where is your code embedded
<html>
<head>
<script>
window.addEventListener("load", function() {
console.log("Your functionality");
});
</script>
</head>
<body>
<h1>Body</h1>
</body>
</html>
You can find more documentatio here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Unbeleivable, same Javascript code do not behave the same way in JSFiddle

I wrote the same code in two JSFiddle, and they do not behave the same way :
HTML:
<p id='complete'></p>
JS:
document.onreadystatechange=fnStartInit;
function fnStartInit()
{
var state = document.readyState
if (document.readyState === 'complete')
{
document.getElementById('complete').innerHTML = 'Document completely loaded'
}
}
Working JSFiddle: https://jsfiddle.net/Imabot/toujsz7n/9/
Non working JSFiddle: https://jsfiddle.net/Imabot/3sLcpa0y/7/
Why do they not behave the same way?
Your first link has the load setting "No wrap - bottom of <head>".
This is equivalent to having HTML like
<head>
<script>
// YOUR SCRIPT HERE
</script>
<head>
<body>
// YOUR HTML HERE
</body>
Your second link has the load setting "On Load":
This is equivalent to having HTML like
<head>
<script>
window.onload = function() {
// YOUR SCRIPT HERE
}
</script>
<head>
<body>
// YOUR HTML HERE
</body>
You can see this if you Inspect the iframe in the lower right. So by the time the second script runs, readystatechange never fires again, so fnStartInit never runs.
Here's a Stack Snippet demonstrating the same problem:
window.onload = () => {
console.log('onload');
document.onreadystatechange = () => {
console.log('ready state just changed');
};
};

Why is nothing logged?

I tried to make it so that a string gets logged in the console every time I click on a button. However, nothing is logged. Why so?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function log_a_string_plz() {
console.log("some string i want logged");
}
document.onload = function() {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
</script>
<title>logging a string test</title>
</head>
<body>
<button id="my_wonderful_button">log a string!</button>
</body>
</html>
I've tried changing event handlers to no avail.
Try:
window.onload = function () {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
jsFiddle example

Why does this super simple jquery not work?

I'm having hard time getting this snippet to work. I have made a minimal example. You can view it online: http://jsfiddle.net/qnnZe/ where it is working!
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p>I am going to test right now.</p>
</body>
</html>
test.js
$("p").click(function () {
$(this).hide("slow");
});
However, on my server it does not work. Here is the link to my server: http://techinf.de/sleepytime/test.html
As always, any help appreciated.
Because in jsFiddle your script code is executed after the DOM has loaded (that's the default option, see the dropdown set to "onDomReady"), on your page it's executed before that. It would work if you wrap your code in a ready() handler:
$(function()
{
$("p").click(function () {
$(this).hide("slow");
});
});
You need to wrap your click handler in a document ready function.
Try either:
$(document).ready(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
or
$(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
It will execute before the DOM is ready. Click handlers should be added in any of the normal jQuery "ready" methods, like:
$(function() {
$("p").click(function () {
$(this).hide("slow");
});
});

Error is not caught by jquery start() function

[Update. I need to be more precise, I see...]
See the following example in javascript:
<html>
<head>
<script>
window.onerror = function() {
alert('error'); // this one works
try {i.dont.exist += 0;}
catch(e) {
// do some stacktrace stuff, this does not trigger
alert(e.stack);
}
};
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function() {
foo[1]++;
});
</script>
</head>
<body>
<p>Hello world.</p>
</body>
</html>
The 2. alert is not triggered. Why?
If I replace "foo[1]++" by "this is a bogus line" everything works and both alerts are triggered. Is there some run-time error problem?
The alert is not triggered because your error handler function was not successfully defined, due to your Javascript error :-) That block of code can't be parsed correctly so it isn't run.
Set it up this way:
<script>
$(function() {
window.onerror = function() {
// ...
};
});
</script>
If it's in its own script tag, then it'll be OK. Now, you may want to reconsider delaying the definition of your error handler to the "ready" event handling, since you may have errors before that point is reached.
[edit] OK here is a complete example, and it works fine for me:
<html>
<head>
<script>
window.onerror = function() {
alert("OH NO THERE HAS BEEN AN ERROR!");
};
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script>
$(function() {
here is some bogus stuff that will cause Javascript parse errors.
});
</script>
</head>
<body>
<p>Hello world.</p>
</body>
</html>

Categories

Resources