Crossbrowser JS...

Question

Hi there all :)

Made this nice little loop for hiding and showing div's, works as a charm in firefox and opera, but IE, safari and chrome say's no.... So my question is; why?

    function theme(nr){
  document.getElementById(nr).style.display = "block";
  for (i = 0;i <= 28; i++) {
   if (i != nr) {
    document.getElementById(i).style.display = "none";
   }    
  }
 }

HTML:

<select id="subject" name="subject">
<option value="no" selected>Velg tema</option>
<option value="value0" onChange="javascript:theme(0)" onClick="javascript:theme(0)" onFocus="javascript:theme(0)">value0</option>
<option value="value1" onClick="theme(1)">value1</option>
</select>

<div class="tips" id="theme_0" name="theme_0">
<div class="tipsLabel">Tips:</div>
<div class="tipsContent">
    lorem ipsum
</div>

<div class="tips" id="theme_1"  name="theme_1">
<div class="tipsLabel">Tips:</div>
<div class="tipsContent">
    more lorem ipsum
</div>

and so on...

Thanx:)

Answer 1

The id is a string. Moreover, the HTML standard says that an ID must start with a letter.

Try getElementById('id-'+i) and change the IDs of the elements accordingly.

Answer 2

From w3c http://www.w3.org/TR/html401/types.html#type-name:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Try changing your id's to begin with a letter and end with a number

Answer 3

Your "i" iterator variable needs to be declared as a local in your function:

function theme(nr){
  document.getElementById(nr).style.display = "block";
  for (var i = 0;i <= 28; i++) {
    if (i != nr) {
      document.getElementById(i).style.display = "none";
    }    
  }
}

If you don't do that, then you're referencing a global variable named "i", which (in IE especially) has the potential of causing all sorts of problems.

As everybody else has noted, you also need to make sure that your element "id" values start with a letter or underscore.

Answer 4

Thanx guys, helped a lot! Especially rahul for bringing up the onChange event which got me on the right course, finally ;) Safari, IE and Chrome doesn't support the onClick event in the tag. Why I don't know, why could they not all agree on something;) (fantasy) Well, I'm looking into the jquery example from rahul, hoping to get it working soon. BTW: the is not supported in IE, and doesn't work in the other browsers either.

So thanx again, and I hope I'll get it working now :)

Up & running, thank God 4 Jquery!! :D:D and big thanx to rahul!! :D