Question

I have a button called WatchMode.

When you click this button, it will close certain divs, specified by the div ID.

The javascript for this is as follows:

function watchmode() { 
document.getElementById('aps30').innerHTML = " ";
} 

Now, I want to do the same for a div that appears twice on my page, this div has a Class instead of an ID.

I tried adding this line to the javascript, but it doesn’t seem to work

document.getElementByClassName('floater').innerHTML = " ";

Any suggestions ??

Answer 1

You have to change a number of things:

1. Fix the spelling mistake in getElementsByClassName
2. Treat the return results of that function call as an array
3. Loop through the contents of the returned array in order to operate on the results
4. Understand that not all old browsers (no version of IE before IE9) support this function so if you want to target older browsers, you may have to check for its existence and use a substitute implementation if it isn’t natively available. You can see the browser support here and see the alternate implementations in the link in Justin’s answer.

Here’s the code:

var divs = document.getElementsByClassName('floater');
for (var i = 0; i < divs.length; i++) {
    divs[i].innerHTML = " ";
}

This is a place where jQuery is really useful. In jQuery, it would just be:

$(".floater").html(" ");

That would automatically find all objects with that class and set the innerHTML of all matching objects to your string.