Can you please help me understand where the code is wrong. The below code doesn't invoke the event handler for window.onload event.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
window.addEventListener("onload", onLoad)
function onLoad(e)
{
debugger;
console.log(Object.getOwnPropertyNames(e));
}
</script>
</head>
<body>
</body>
</html>
Is this what you want?
window.onload = function(e) {
debugger;
console.log(Object.getOwnPropertyNames(e));
};
Related
problem: the page executes the javascript onclick propertise before get clicked.
here is my code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo">Hello World!</h1>
<script>
var x = document.getElementById("demo");
x.onclick = alert("clicked");
</script>
</body>
</html>
solution: when I change the line x.onclick = alert("clicked");
to
x.onclick = function() {alert("clicked")};
It works.
I want to understand the reason behind this behavior of onclick.
The reason for that behaviour is, that you simply make a function call and when the JavaScript interpreter comes to that line it will be directly executed. You need to implement a reference to a function or a function definition itself to avoid this (as you did in your solution).
x.onclick = myMethod() // NOT working due to directly execution
x.onclick = () => myMethod() // working
x.onclick = myMethod // working
x.onclick = function() { myMethod() } // working
I f you write the code this way also works same
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var x;
x.onclick = alert("clicked");
</script>
</body>
</html>
SO your code not understand where you try to send this alert so automatically display
so that's not a good way If you try to display alert when clicked on text then do this method
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1 id="demo" >Hello world!</h1>
<script>
document.getElementById('demo').onclick = function(){
alert("clicked");
}
</script>
</body>
</html>
I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
I have the following html file, called a.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
</body>
</html>
And the following Javascript file, called a.js
(function() {
$(document).trigger('foo');
}());
When I open a.html, the trigger call in a.js is called, the line
$(document).on('foo', function () {
is called but the alert is never called. What am I doing wrong?
The issue in the above code as per my understanding is a.js is getting loaded before the below script.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
And this event is getting bind after its already been called in a.js.
Try loading a.js below above script like below.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
place both the scripts at one place in the order as shown it will work..
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<label> rerwnr</label>
<script>
</script>
</body>
</html>
(function() {
$(document).on('food', function () {
alert('test');
});
$(document).trigger('food');
}());
https://codepen.io/pavankumark/pen/WExNEg
Check out the link here for more details.
Try adding the script file a.js at the end of body,
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
</body>
You need to update your code like this:
You can put script code to a.js file:
Here id demo: https://jsbin.com/fukujad/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("test", function(){
alert("test triggered");
});
$(document).trigger("test");
});
</script>
</body>
</html>
In a.js you call trigger foo before you defined it,
try to use document ready like this and it will work
$(document).ready(function(){
$(document).trigger('foo');
})
It will wait to load whole document (and all scripts in the document)
I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>
I have this simple HTML page:
<html>
<head>
<script>
share();
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
I need to call the function share from the <head> and the function itself must be defined in the <body>.
The above code leads to undefined function error.
This is just a simplified script to explain the issue so it needs to be done that way. Is there a way around this?
You need to wait for the body to be loaded, so
<html>
<head>
<script>
window.onload=share;
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
You can use
<html>
<head>
<script>
windows.onload = function(){
share();
}
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
or you can use Jquery version
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
Both of them work in this condition however if you want to know the difference between this tow I suggest to see this
window.onload vs $(document).ready()
Use
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>