This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
first one:
function change(){
document.getElementById("clr").style.backgroundColor="red";
document.getElementById("test1").innerHTML="hwllo world";
}
second one:
document.getElementById("test1").innerHTML="hwllo world";
The first one is working fine. But the second one is not working when the file is loaded.
Javascript and HTML rendering are executed in the sequence they are found in the file. So if you're executing a piece of JS before an HTML element is rendered then the JS code wouldn't work.
This will fail:
<script>
document.getElementById("test1").innerHTML="hwllo world";
</script>
<div id="test1"></div>
This will work as expected:
<div id="test1"></div>
<script>
document.getElementById("test1").innerHTML="hwllo world";
</script>
Alternatively you can use the various onload and dom ready events to make sure that your script executes after all the HTML have been rendered:
<script>
window.onload = function(){
document.getElementById("test1").innerHTML="hwllo world";
}
</script>
<div id="test1"></div>
And what error is in console? May be you are trying to set innerHTML of not existing node? If you want to manipulate with divs, you have to do it after the page is loaded, so typically call this as body event onLoad:
<script>
function init() {
document.getElementById("test1").innerHTML="hello world";
}
</script>
<body onload="init();">
<div id="test1"></div>
...
As James Allardice said in his comment, the code is probably executed before the DOM is ready. Your code could then fail as the element might not be there. This is a known problem, but there is also a known solution. The most used solution is probably to use jQuery, which has an easy way to allow a function to only be executed after the document is ready. To use this method, first you need to include jQuery as a script reference and then modify your code as follows:
$(document).ready(function() {
document.getElementById("clr").style.backgroundColor="red";
document.getElementById("test1").innerHTML="hwllo world";
});
Now if you are using jQuery anyways, you can also rewrite your code to use jQuery selectors and make it a bit more compact:
$(document).ready(function() {
$("#clr").css("backgroundColor", "red");
$("#test1").html("hwllo world");
});
Both pieces of code are functionally equivalent.
Related
This question already has answers here:
Is it really necessary to wait for DOM ready to manipulate the DOM?
(4 answers)
Closed 4 years ago.
It seems the following inline code works by putting js right after the tag:
(1)
<div id="xx"></div>
<script>
document.getElementById('xx').addEventListener('click', aFunction);
</script>
It seems there is no need to wait document ready like this:
(2)
<div id="xx"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('xx').addEventListener('click', aFunction);
});
</script>
Will the inline code (1) always work?
Please notice that I made sure <div id="xx"></div> is before the script.
You dont have to but you should. If you dont you will get errors when you try performing actions on elements in the dom when they havent been loaded yet, using document ready just ensures you dont have this issue, one less problem to debug basically.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
Hello guys I would like some help since I am new to JS
I expect this piece of code to show an alert with the href of the element "aaa" but nothing happens. Could you explain what I am doing wrong?
thanks
<html>
<body>
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
file word
</body>
</html>
Please delete this question as it is a duplicate of
Why does jQuery or a DOM method such as getElementById not find the element?
I am sorry for posting .. I am new to JS and I didn't know what to search for in the first place
The problem is that your script is executed before the a tag is rendered. Put the script tag after the a tag and it should work.
First of all, you should use Developer Console for finding errors (right click page, then Inspect Element).
Anyway, the problem seems to be that your JavaScript is done before you have made the anchor (a) element.
<html>
<body>
file word
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
</body>
This should work.
The script is executed before the DOM is ready so there is no element with id aaa.
You can add the script inside
window.load=function(){
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
}
You can also define the script tag near closing body tag. In this case the DOM is ready and it will able to find an element with id
<body>
file word
<script type="text/javascript">
function myFunction(){
var xxx = document.getElementById("aaa").href;
alert(xxx);
}
myFunction();
</script>
</body>
Just as Patrick said, move the tag down after and I think this value of href is what you looking for
var xxx = document.getElementById("aaa").getAttribute("href");
For example, bootstrap put the jQuery at the end of the html, e.g. http://twitter.github.com/bootstrap/examples/starter-template.html
What if, you want to insert a code block before the loading of jQuery script itself, e.g.
<div id="test1"></div>
<div id="test2"></div>
<script>
$(document).ready(function() {
$('#test1').html('test1'); // not work, any workaround? the code must be put before..
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#test2').html('test2'); // work
});
</script>
Test: http://jsfiddle.net/e5HKZ/
I want both test1 & test2 also displayed.
Any idea?
If you really have to put jQuery code before the line that loads jQuery itself, assign the function to document.ready.
window.document.ready = function() {
$('#test1').html('test1');
};
When jQuery has been loaded, it reads the variable and executes the function at DOM ready.
Note that this is most likely undocumented behavior and might not work reliably or in future jQuery versions.
Demo: http://jsfiddle.net/e5HKZ/1/
This question already has answers here:
How to check if DOM is ready without a framework?
(7 answers)
Closed 1 year ago.
I have a requirement that states to use only plain JavaScript and not jQuery. I need to initialize some variables(using some function) as soon as the DOM is loaded and not when the page has fully loaded. In short it should not wait for the whole page to load. In jQuery it can be very easily done using document.ready() function.
Is it possible to implement it in JavaScript using any function?
a "practical" way is just placing a script block before the end of the document (even is not really equivalent to domready)
...
<script>...</script>
</body>
</html>
or use one of various pure-js implementation of DomReady event, like http://snipplr.com/view/6029/domreadyjs/
It's sometimes achieved like this
<body>
<!--
All your html tags here
....
....
-->
<script type="text/javascript">
//this should execute after the above tags and elements have rendered
</script>
</body>
You can use DOMContentLoaded event if supported:
MSDN: http://msdn.microsoft.com/en-us/library/windows/apps/hh868490.aspx
MDN: https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded
if you realy want to wait for "ready event" you can for example use that kind of thing :
(function(w,evt,fn){
if (w.addEventListener){// W3C DOM
w.addEventListener(evt,fn,false);
}
else if (w.attachEvent) { // IE DOM
w.attachEvent("on"+evt, fn);
}
})(window,'load',function(){
// your code here
});
but it's indeed better to simply use a well placed 'script' tag as your code will probably work and start sooner
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
When do I need to specify the JavaScript protocol?
for example
<body onload="javascript:something();">
in this code, should I put javascript: ?
some of the codes attatch javascript:,
but some don't.
what is the safe and correct?
A better solution would be to avoid explicit use of JavaScript in your markup altogether and to use something like jQuery to extract it all to a separate file; you can then do something like this:
$(function()
{
// This will be run when the document is loaded.
alert('foo');
$('#some-link').click(function()
{
// This will be run when the element with id `some-link` is clicked.
alert('bar');
});
});
No. Just use your javascript.
<body onload="something();">
javascript: can be used with the href attribute of a element.
<a href="javascript:something();">
But just for the protocol, I prefer using the onload method.
I'd suggest something like
<body>
...
<script>
function something() {}
window.onload = something;
</script>