CodingForums.com - Script not catching first trigger event?

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - Script not catching first trigger event? (http://www.codingforums.com/showthread.php?t=225797)

ARCLite Studio

05-02-2011 08:35 PM

Script not catching first trigger event?

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 (Post 1085747)

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>

All times are GMT +1. The time now is 04:34 PM.