Javascript help

They have: 426 posts

Joined: Feb 2005

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's picture

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

var divs = document.getElementsByClassName('thediv');

They have: 426 posts

Joined: Feb 2005

Hi Mate,

Yes i dont know about the hyphen. But even without it just doesnt work??

pr0gr4mm3r's picture

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's picture

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

They have: 32 posts

Joined: Dec 2008

className is SuperClass
bad method

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

HolyWarlock wrote:
className is SuperClass
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.