onclick className change doesn't work in IE

Forum Moderators: open

Message Too Old, No Replies

onclick className change doesn't work in IE

works fine in Firefox and Safari

Cher

4:57 am on Jun 4, 2008 (gmt 0)

My sad, little code:


<a href="#blue1" onclick="document.getElementById('blue1').className='event_visible'; return false;">
<a name="blue1"></a>
<div class="event" id="blue1" name="blue1">
(stuff)
</div>

CSS:


div.event{
margin-top:20px;
visibility:hidden;
display:none;
}
div.event_visible{
display:block;
visibility:visible;
}

I am trying to get a div to appear when a user clicks on a link. Only the IE group (both 6 and 7) fail to make the class change if the user clicks the link.

On the other hand, the link to make all hidden divs appear does work:


function displayAllEvents(){
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className.indexOf('event') == 0 && div.className) {
div.className = 'event_visible';
}
}
}

I'm at a loss and it's driving me crazy. Could someone give me a nudge in the right direction? I have done forum and web searches but no solutions seem to work.

daveVk

7:36 am on Jun 4, 2008 (gmt 0)

IE getElementById returns both elements with name OR id matching. Solution do not use same text for id and name, perhaps use use id="idBlue1" or like convention.

Cher

2:36 pm on Jun 4, 2008 (gmt 0)

I had put the "name" in there with the hope that it would fix the IE problem, but unfortunately it didn't change anything.

I also had to remove the "return false;" from the onclick because it stopped Firefox from jumping down the page to the newly opened div.

So now I have


<a href="#blue1" onclick="document.getElementById('blue1').className='event_visible';"><a name="blue1"></a>
<div class="event" id="blue1">
(stuff)
</div>

Internet Explorer still will not open the div.

I decided to try and paste the css, div, and javascript link it its own plain html page to see if for some reason another style was causing a problem, and IE still won't change the class. Now I have just this on a plain html page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
div.event{
margin-top:20px;
visibility:hidden;
display:none;
}div.event_visible{
display:block;
visibility:visible;
}
</style>
</head>
<body>
 
<a href="#blue1" onclick="document.getElementById('blue1').className='event_visible'; return false;">click me</a>
<a name="blue1"></a>
<div class="event" id="blue1">
(stuff)
</div> </body>
</html>

I've tried it with the standard xhtml strict and the old fashion html4 (like the code above) but the crazy thing still won't work in IE.

coopster

2:53 pm on Jun 4, 2008 (gmt 0)

IE confuses the name and id attributes, as daveVk suggested. Try this:

<a href="#blue1" onclick="document.getElementById('event1').className='event_visible'; return true;">click me</a> 
<a name="blue1"></a> 
<div class="event" id="event1"> 
  (stuff) 
</div>

Cher

3:14 pm on Jun 4, 2008 (gmt 0)

OOHHH I feel so goofy. I thought Dave meant the "name" attribute in the div, not the name in the href.

oye how embarrassing.

Thank you both. Now IE is behaving as I expected it to.

coopster

3:45 pm on Jun 4, 2008 (gmt 0)

Don't be embarrased, you should expect it to work correctly! Bugs are hard to spot and that is why we have communities like WebmasterWorld. Have a look at the differences in IE and IE8 BETA

Returns a reference to the first object with the specified value of the ID or NAME attribute

Returns a reference to the first object with the specified ID value.

[msdn.microsoft.com...]
[msdn.microsoft.com...]