Crossbrowser JS

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++开发者_如何学C) {
   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:)

---

You cannot use id s like this. Id should not start with a number.

Change your code to something like this. Append a string in front of the numbers for the elements.

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

From Basic HTML data types

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 (".")

Edit

Assign the change event handler to the select instead of option.

<script>
function theme(elem)
{
    var selectedVal = elem.value;

    if ( document.getElementById("theme_" + selectedVal) != null )
    {
        document.getElementById("theme_" + selectedVal).style.display = "block";
    }

    for (i = 0;i <= 28; i++) 
    {
        if (i != selectedVal) 
        {
            if ( document.getElementById("theme_" + i) != null )
            {       
                    document.getElementById("theme_" + i).style.display = "none";
            }
        }    
    }
}
</script>

<select id="subject" name="subject"  onChange="javascript:theme(this)">
    <option value="-1" selected>Velg tema</option>
    <option value="0">value0</option>
    <option value="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>

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

Sample using jquery

<script>

$(function(){
    $("#subject").change(function(){
        var selectedVal = $(this).val();
        if ( selectedVal == -1 )
        {
            $("div.tips").show();   
        }
        else
        {
            $("div.tips").hide();
            $("#theme_" + selectedVal).show();
        }
    });
});

</script>
<select id="subject" name="subject">
    <option value="-1" selected>Velg tema</option>
    <option value="0">value0</option>
    <option value="1">value1</option>
</select>

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

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

Working Demo

---

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.

---

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

---

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.

---

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