This question already has answers here:
window.onload vs document.onload
(9 answers)
Closed 8 years ago.
I write document.onload code inside my head tag.. but it doesn't seems to work.
here is my code..
<head>
<script>
document.onload = function () {
alert("Window Loaded...!!");
}
</script>
</head>
But if i replace with window.onload it perfectly works!!
What is the problem? Am I doing something wrong ??
As far as I'm aware, the closest you can come to your method is:
document.addEventListener('DOMContentLoaded', function () {
/* your logic here */
});
The problem you have is document may not have a method of onload for a particular browser. Luckily! The window does in most cases. :) Give that a try for your JavaScript invocation.
Related
This question already has answers here:
How to run a function when the page is loaded?
(11 answers)
Closed 6 years ago.
I want to run this script on pageload or after all the elements are loaded.
JavaScript
<script type="text/javascript">
function backgroundload (){
$(".portfolio-background-color")
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}
window.onload = backgroundload;
</script>
i'm new to js please check if my code is okay and is it the correct way to load the js
All Javascript runs on page load. If what you mean is that you want it to run after all the elements in the page have been initialized, there are several ways:
window.onload
document.onload
body.onload
$(document).ready
There are more in-depth explanations of the support for the first three, and the differences between them, here. Documentation for $(document).ready is here.
However, in my experience, the easiest way to ensure that a script runs after all synchronously-loaded content is simply to place the <script> element at the bottom of the <body>.
This question already has answers here:
Why does jsfiddle throw error that function is not defined? [duplicate]
(1 answer)
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 6 years ago.
I'm trying to run a basic JavaScript function from an external file but I'm getting inconsistent results. Basically, I can't get a button's "onclick" event to fire when I put the script in an external JS page. I can get it work in CodePen:
CodePen
nonsense code
but NOT in JSFiddle:
JS Fiddle Examlple
I can always get it work when the script is part of the HTML page but I don't want to do that. Can you help? Thanks!
jsfiddle puts the javascript code in its own context:
//<![CDATA[
window.onload=function(){
function clickFunction()
{
alert("this is working");
}
}//]]>
But codepen puts the js in the global scope.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I'm uploading code from my project to Plunker. You can see it here. When I run the code through a local server and render it in Chrome, the functionality works fine. When I try to run it through Plunker the code fails.
This snippet is inside of script.js:
$('.navbar-toggle').click(function(){
alert('test1');
if ($(this).hasClass('login')) {
$('.navmenu-style1').css("z-index","1");
$('.navmenu-style').css("z-index","0");
}
else {
$('.navmenu-style1').css("z-index","0");
$('.navmenu-style').css("z-index","1");
}
});
How can I make it work in Plunker please? Is there a more universal bit of code that I can use or am I simply doing something wrong?
Cheers
You have made one of the most common mistakes anyone makes when using JQuery. You tried to attach a click handler to a DOM object before the DOM was loaded:
<html>
<head>
...
<script src="script.js"></script>
contents of script.js:
$('.navbar-toggle').click(function(){ ... });
You have to wait for the DOM to load before you run that code. Like so:
$(function () {
$('.navbar-toggle').click(function(){ ... });
});
Note: $(function) is just a shortcut for $(document).ready(function).
This question already has answers here:
onclick="" vs event handler
(9 answers)
Closed 9 years ago.
I have been using onclick to execute my javascript code for a long time, but I was told by many folks not to use this inline javascript, and I don't know the disadvantage of it
If you mean the difference between these, the second is far clearer and cleaner, because it separates the behaviour from the content.
Method 1:
index.html:
<div onclick="alert('div clicked!');this.innerHTML='Clicked!';">Not clicked...</div>
Method 2:
index.html:
<div id="123">Not clicked...</div>
<script src="js/scripts.js"></script>
js/scripts.js:
var elem = document.getElementById("123");
elem.onclick = function(e) {
alert('div clicked!');
this.innerHTML = 'Clicked!';
};
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
$(document).ready equivalent without jQuery
I want to wait until an ASP.NET datagrid is resized correctly before showing a popup message. This works great:
$(document).ready(function () { showpopup(); });
But I need to acheive it without jQuery. I've tried many ways:
$(window).bind("load", function() {showpopup();}
$(function() { showPopup();}
but this doesn't work.
My preferred method of doing such things is to start my script with:
var loadScripts = [],
loadScript = function(callback) {loadScripts.push(callback);
Then, the very last thing on the page before </body> is:
<script type="text/javascript">(function() {var x; while(x=loadScripts.shift()) x();})();</script>
Then, whenever there's something I want to defer until the DOM has loaded, I simply enclose it in:
loadScript(function() {
// do stuff here
});