最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Crossbrowser JS - Stack Overflow

programmeradmin5浏览0评论

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:)

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:)

Share Improve this question edited Mar 9, 2010 at 11:59 Christian Haaland asked Mar 9, 2010 at 11:11 Christian HaalandChristian Haaland 1512 silver badges9 bronze badges 2
  • Could you please paste the HTML so that we could see the ID's of your DIV's? – Kerido Commented Mar 9, 2010 at 11:13
  • hi, addded the html, not all, but a sample. – Christian Haaland Commented Mar 9, 2010 at 12:01
Add a ment  | 

5 Answers 5

Reset to default 11

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/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

发布评论

评论列表(0)

  1. 暂无评论