JavaScript CSS styling in IE

Question

JavaScript CSS styling not working in IE, it is working in Chrome and Mozilla.

This is my code:

document.ready=function() {
        var val = document.getElementById("registration_select").value;
        if(val =="Relay - Ultra, Standard and Sprint distances (Men / Women/ Mixed) - open to all Age-Groups & Juniors above 16"){            
        document.getElementById("register_right").style.display="block";
        }
        else{            
        document.getElementById("register_right").style.display="none";
        }

 registration_select.onchange=function(){
        var val = document.getElementById("registration_select").value;
        if(val =="Relay - Ultra, Standard and Sprint distances (Men / Women/ Mixed) - open to all Age-Groups & Juniors above 16"){            
        document.getElementById("register_right").style.display="block";
        }
        else{            
        document.getElementById("register_right").style.display="none";
        }
     }
};

This is my HTML

<select id="registration_select" name="Category">
<option value="category1">category1</option>
<option value="Relay - Ultra, Standard and Sprint distances (Men / Women/ Mixed) - open to all Age-Groups & Juniors above 16">Relay - Ultra, Standard and Sprint distances (Men / Women/ Mixed) - open to all Age-Groups & Juniors above 16</option>
</select>

<div id="register_right">

<h3>Team Mate Profile</h3>

</div>

And this is my CSS

#register_right{float:right;  display:none; width:49%;}

Please Help.

plz show the html also..and make sure there is no duplicate id's in your html. — Kartikeya Khosla
– Kartikeya Khosla, Commented Oct 1, 2014 at 5:14
just a suggestion... javascript is case sensitive you are compairing a long string in if statememt ... so just convert left and right hand side to lowercase and then check whether they are equal or not. — Kartikeya Khosla
– Kartikeya Khosla, Commented Oct 1, 2014 at 5:20
Jquery has left the building. Your code has no jquery in it! — Macsupport
– Macsupport, Commented Oct 1, 2014 at 5:21
jsfiddle.net/89epLxao Check this. Working fine in IE10 and Chrome — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Oct 1, 2014 at 5:45

shaharan · Accepted Answer · 2014-10-01 08:06:10Z

1

Try this

 jQuery(function($) {
        var val = document.getElementById("registration_select").value;

            if(val =="Relay - Ultra, Standard and Sprint distances (Men / Women/ Mixed) - open to all Age-Groups & Juniors above 16"){            
                document.getElementById("register_right").style.display="block";
            }
            else{            
                document.getElementById("register_right").style.display="none";
            }

            document.getElementById("registration_select").onchange=function(){
                var val = document.getElementById("registration_select").value;
                if(val =="Relay - Ultra, Standard and Sprint distances (Men / Women/ Mixed) - open to all Age-Groups & Juniors above 16"){            
                    document.getElementById("register_right").style.display="block";
                }
                else{            
                    document.getElementById("register_right").style.display="none";
                }
            }

    });

answered Oct 1, 2014 at 8:06

shaharan

1063 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shaharan Over a year ago

@AasimHussainKhan : in your code, registration_select was undefined.

Collectives™ on Stack Overflow

JavaScript CSS styling in IE

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related