Javascript help
I have some divs strategically placed on my page
When i load the page i want to fill these divs with anything i want. I wrote this little function just to loop through all these divs and insert some text using innerHTML.
Only it doesnt work?
window.onload = function(){
var divs = document.getElementsByClassName('thediv');
for(i=0;i<divs.length;i++){
divs[i].innerHTML='Hello i am here';
}
}
This has been placed in the head section. Really i want this in an external file and rather than using to generate a div to append to the end of each tag?
When using appendChild it doesnt seem to work?
Any help appreciated
decibel.places posted this at 13:27 — 8th December 2008.
He has: 1,494 posts
Joined: Jun 2008
I have found that the
onload
statement requires a function name, with the function already declared elsewhere (note that the function parentheses are omitted too).example:
function fillerup(){
var divs = document.getElementsByClassName('thediv');
for(i=0;i<divs.length;i++){
divs[i].innerHTML='Hello i am here';
}
}
window.onload = fillerup;
you may need to declare divs as an array?
function fillerup(){
var divs = new Array();
divs = document.getElementsByClassName('thediv');
for(i=0;i<divs.length;i++){
divs[i].innerHTML='Hello i am here';
}
}
for some reason a hyphen is being added at the end of the line
benf posted this at 14:33 — 8th December 2008.
They have: 426 posts
Joined: Feb 2005
Hi Mate,
Yes i dont know about the hyphen. But even without it just doesnt work??
pr0gr4mm3r posted this at 14:54 — 8th December 2008.
He has: 1,502 posts
Joined: Sep 2006
This worked for me:
<html>
<body>
<div class="thediv">
This will get replaced.
</div>
<div class="thediv">
This will get replaced.
</div>
<script type="text/javascript">
var divs = document.getElementsByClassName('thediv');
for(i=0;i<divs.length;i++){
divs[i].innerHTML='Hello i am here';
}
</script>
</body>
</html>
The JavaScript needs to be in the body and after the code you are looking to modify.
decibel.places posted this at 19:47 — 8th December 2008.
He has: 1,494 posts
Joined: Jun 2008
getElementsByClassName works in Firefox, not in IE
but this will work:
<html>
<body>
<div class="thediv">
This will get replaced.
</div>
<div class="thediv">
This will get replaced.
</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if (divs[i].className == "thediv") divs[i].innerHTML='Hello i am here';
}
</script>
</body>
</html>
and with the onload statement:
<html>
<head>
<script type="text/javascript">
function fillerup() {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if (divs[i].className == "thediv") divs[i].innerHTML='Hello i am here';
}
}
</script>
</head>
<body>
<div class="thediv">
This will get replaced.
</div>
<div class="thediv">
This will get replaced.
</div>
<script type="text/javascript">
<!--
onload=fillerup;
//-->
</script>
</body>
</html>
I suppose this could become processor-intensive if there are a large number of divs that are not getting replaced - perhaps it would be worthwhile to examine some of the scripts in the Google search
HolyWarlock posted this at 04:39 — 12th December 2008.
They have: 32 posts
Joined: Dec 2008
className is SuperClass
bad method
decibel.places posted this at 05:10 — 12th December 2008.
He has: 1,494 posts
Joined: Jun 2008
bad method
While className and ClassName are used in some Super Class scripts (under the prototype library, for example)
object.className is a valid HTML DOM property
can you elaborate on your objection?
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.