Javascript getElementById()

Question

Hello everyone. I'm trying to create a generic javascript function that would change attributes on events.

The way it would work is

function fooFunction(sourceElement) 
{    
  var newName = sourceElement+'Span';    
  var newElement = document.getElementById(newName);
  //Important line
  newElement.property = "enter properties here";
}

and I'd call it with something like

<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction(this.id);"/>
<span id="fooSpan" name="fooSpan">some text here</span>

So in theory, when hovering the image, it should change whatever propery I need to change on the fooSpan object. It works in Opera, but on IE it returns a null object.

Any ideas ?

The idea would be that I would have multiple images that would automatically trigger the property change on the associated text span (typically the css style).

Answer 1

Are you sure you're getting the ID properly in IE? Maybe the ID being passed in is null in IE (perhaps this.id isn't working?).

Try calling it like this:

<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction('foo');"/>

and see if that helps. I don't see any reason why getElementById() would fail, so the only thing I can think of is that it's an ID issue.

Answer 2

May be this line won't work in IE. "newElement.property" I don't know the exact reason.

You can use this instead of that line

newElement.setAttribute(property,"enter properties here");

In the mean time, i am trying to find out the reason behind the error.

Answer 3

My suggestion would to do something like this.

function fooFunction(sourceElement,property,propertyValue) {    
  var newElement = document.getElementById(sourceElement);
  newElement.setAttribute(property,propertyValue);
};

And your HTML would look like:

<img src="foo.gif" id="foo" name="foo" 
           onmouseover="fooFunction('fooSpan','class','mouseover_span');"/>
<span id="fooSpan" name="fooSpan">some text here</span>

Answer 4

I'd STRONGLY urge you to consider using jQuery's built-in attr() method which integrates the function you want perfectly across browsers and is incredibly easy to use.

Using your example, if you wanted to change the "src" property for "foo", you could do it in a single line of code:

$("#foo").attr("src","images/whatever.png");

Similarly, if you wanted to change the html WITHIN "fooSpan", all you'd have to do is:

$("#fooSpan").html("something else");

You can even tie these to events that are going to give you a lot more flexibility than the onmouseover property:

$(document).ready(function(){
$("#foo").mouseover(function(){
    $("#fooSpan").html("something else");
    $("#foo").attr("src","images/whatever.png");
    });
});