On IE document.getElementsByName won't work

Question

I use this code:

<div name="1234">
   <img src="pic.gif" height="70" width="100" onMouseOver="clear('1234')">
</div> 

And:

function clear(element_name){
    document.getElementsByName(element_name)[0].innerHTML="";
}

It does work in Firefox and Opera, but doesn't work in IE 6.0 or IE 8.0, and probably not even in newer IE's.

What to do?

Answer 1

Well, the problem is this: IE understands document.getElementsByName(...)[0] as document.getElementById(...). So if you would define also an id for your element, the method document.getElementsByName(element_name)[0].innerHTML="" will surprisingly also work in IE!

But since you anyway need to define an id due to IE, and since an id must always start with a char first, you must use:

<div id="a234">
    <img src="pic.gif" height="70" width="100" onMouseOver="clear('a234')">
</div> 

And this command:

function clear(element_id){
    document.getElementById(element_id).innerHTML="";
}

Even more, document.getElementsByName(...)[0] is slower in Firefox: http://www.uize.com/tests/performance/getElementById-vs-getElementsByName.html

So the id definitely wins the race.

UPDATE:

Also important is the fact, that we can adress every id by #a234{...} in a CSS file. So we can define an own style for every id, and this makes the id even more powerful.