Script not catching first trigger event?

ARCLite Studio · 05-02-2011, 08:35 PM

Hey everyone,

In the code below its simply being used to hide/show a div "content" whose CSS display value is set to NONE initially, the problem is this script ignores or doesn't fire on the first click, but it works perfect if i click the link a second time. The page has NO other scripts running. any ideas?

Code:

<a href="javascript:void(0)" onmousedown="if(document.getElementById('content').style.display == 'none'){ document.getElementById('content').style.display = 'block'; }else{ document.getElementById('content').style.display = 'none'; }">Contest Rules</a>

ARCLite Studio

DanInMa · 05-02-2011, 08:50 PM

wow that's weird. it doesnt detect that it's set to none so it sets it to non ( inline) on the first click, then sets it to block (inline) on the second click

I'm interested in the answer myself. if you set the style to display none inline, it works as expected.

ARCLite Studio · 05-02-2011, 09:14 PM

Quote:

Originally Posted by DanInMa

wow that's weird. it doesnt detect that it's set to none so it sets it to non ( inline) on the first click, then sets it to block (inline) on the second click

I'm interested in the answer myself. if you set the style to display none inline, it works as expected.

Hey DanInMa, Thanks didn't try to set it Inline but your right it triggers as expected that way. Even though this fixes the immediate problem I still think this is strange behavior so if anyone else has ideas on it, I'd still like to hear them.

AndrewGSW · 05-02-2011, 09:42 PM

You can't read the 'style.property' of an element unless it has either been assigned using JS code or is set using an inline style. But on the second mousedown it has been set by your JS, so it can then be read.

ARCLite Studio · 05-02-2011, 10:21 PM

Thanks Andrew, I understand now. seems strange that it can't read the value set in CSS style TAG but in any case it's a lesson learned. Thanks.

devnull69 · 05-03-2011, 07:09 AM

That's what getComputedStyle() is for ... at least for "modern browsers". Internet Explorer needs a push to the right direction with http://snipplr.com/view/13523/getcomputedstyle-for-ie/

Kor · 05-06-2011, 09:56 AM

Better use two classes. And call a function, do not write an inline code. And use onclick

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#content.hidden{
display:none;
}
#content.shown{
display:block;
}
</style>
<script type="text/javascript">
function showhide(id){
var div=document.getElementById(id);
div.className=div.className=='hidden'?'shown':'hidden';
}
</script>
</head>
<body>
<a href="#" onclick="showhide('content');return false">Contest Rules</a>
<br>
<br>
<div id="content" class="hidden"> Content</div>
</body>
</html>