Changing element.style wont work in IE

JavaScript
1

I’m currently putting javascript function onto a page to swap the content between 2 divs onclick- when one is visible one is hidden and vice versa (they are in the same place to create a tabbed browsing effect).

the script:

<script type=“text/javascript”>
*
function detailStyle()
{
descrip = document.getElementById(‘description’);
descrip.style.display = “none”;
details = document.getElementById(‘details’);
details.style.display = “block”;
}

function descripStyle()
{
descrip = document.getElementById(‘description’);
descrip.style.display = “block”;
details = document.getElementById(‘details’);
details.style.display = “none”;
}
</script>

the css:

#description, #details {

		Position: absolute;
		left: 20px; 
		top: 190px;
		width: 230px;
		height: 110px;
		margin-top: 0px;
		}

#description {
display:block;
}

#details {
display:none;
}

The html:
<div id=“description” >broad product description goes here</div> <div id=“details” >product technical spec goes here</div>
<div id=“detailLink”><a class=“detailButton” href=“javascript:detailStyle();”>details</a></div>
<div id=“descripLink”><a class=“descripButton” href=“javascript:descripStyle();”>description</a></div>

I have been going mad for days with this, it should be easy. Please tell me where i’m going wrong! It works perfectly on mac (safari and ff), pc firefox. Just not in IE…

2

That problem may result from not explicitly declaring the variables ‘descrip’ and ‘details’. Those variable names are used (or rather re-used) in both the detailStyle() and descripStyle() functions. But because they are not declared within each of those functions, they have been forced into global scope. Although the other browsers don’t seem to mind it, in this case, IE gets confused.

So, just use ‘var’ in all 4 cases there, e.g.

var descrip = document.getElementById('description');