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
Related
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'
I wish to add code to a click event in a file and a script tag. But they seem to conflict. How can I achieve this?
javascript:
window.onload = function()
{
document.getElementById("button3").addEventListener("click", respond3);
}
function respond3(e)
{
alert("Way to go!!");
}
html:
<head>
<title>Second Javascript</title>
<script src="Second.js"></script>
<script>
window.onload = function()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
</head>
<body>
<h1>The quick brown fox jumps over the lazy dogs</h1>
<button onclick='alert("bad practice");'>Inline</button>
<button id='button2'>Script tag</button>
<button id='button3'>Separate file</button>
</body>
Per Quentin's suggestion I changed the script tag to this:
<script>
window.addEventListener('load', AddClick2)
function AddClick2()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
The on* properties can only have one function assigned to them. It's not so much a conflict as you are simply overwriting the first onload function with the second.
While you could do something along the lines of checking to see if there is already a function there, then copying it to a new variable, then calling it from the new variable inside your new onload function … that gets messy.
Use addEventListener instead.
window.addEventListener('load', a_function);
window.addEventListener('load', a_different_function);
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');
};
};
Can I use body onload and window.onload at the same time? I've tried it using this code
<body onload = "alertFirst()">
</body>
<script>
window.onload = alertSec;
</script>
But it didn't work. I just need someone to confirm it to me. Many thanks
The answer to your question is "no". However there are ways around it.
Adding both calls to one onload function is ideal, but if you /have/ to add an onload handler after one is already added, and you are not using a framework which facilitates this, you can get by like this:
<html>
<head>
<script type="text/javascript">
function alertFirst(){
alert('First');
}
function alertSec(){
alert('Second');
}
</script>
</head>
<body onload="alertFirst();">
content
</body>
<script>
var func = document.body.onload;
window.onload=function(){
func();
alertSec();
}
</script>
</html>
You can (by adding event handler(s)) but you should NOT have both
Instead add the call to the window.onload:
<html>
<head>
<script>
window.onload = function() {
alertFirst();
alertSec();
}
</script>
</head>
<body>
</body>
No, document.body.onload is actually mapped to window.onload. You can check yourself—when you have <body onload="a()"> and to console.log(window.onload), a() is printed out into the console.
What you can do is to have one onload event handler that calls two other functions.
window.onload = function () {
a();
b();
};
or two event listeners
window.addEventListener('load', a, false);
window.addEventListener('load', b, false);
If one or more of the scripts you want to use has the event handler in the BODY HTML tag, you can still move it to into javascript code. See the example below:
Script #1:
<script language="javascript">
function start(){
...code for script #1...
}
</script>
<body onload="start()">
Script #2:
<script language="javascript">
function init(){
...code for script #2...
}
window.onload=init;
</script>
Result:
<script language="javascript">
function start(){
...code for script #1...
}
function init(){
...code for script #2...
}
window.onload=function(){
start();
init();
}
</script>
<body>
I think it may can help you.
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");
});
});