View Full Version : Trouble Passing Values Using onClick Event

01-17-2012, 07:56 PM
I have a page with a div, <div id= PF_Text_Panel></>, containing text describing an image, the image is in a separate div. Using CSS the text panel is on top of the image and covers about 1/3 of the image’s left side. A slide effect, handled by the function Slide, targets the PF_Text_Panel div. The function Slide is triggered by an onClick event allowing the user to slide the description to the left and reveal the entire image.

The function Slide contains an if statement. The if statement is used to determine if PF_Text_Panel is open or closed using the variable SldPnlState as a flag like this; if the variable SldPnlState ==1, then run Slide. The other part of this function, which actually slides the div is an instance of the Slide Effect, inserted using Dreamweaver CS4.

The variable SldPnlState is set using the function setSldPnlState

The function setSldPnlState, initiated by an onClick, passes a value to the variable SldPnlState, in this case it can be set to either 0 or 1 by separate onClick events

To test if the variable SldPnlState is being passed from the onClick event to the variable I included the function printVar which writes the value of the variable SldPnlState to the screen.

I believe that the Spry effect Slide portion of the function works because if I go into the code and manually set the variable SldPnlState to 1 the function Slide works and if I set it to 0 the function Slide does not work.

This the bug:
printVar indicates that the value is being passed the variable SldPnlState, it displays either a 1 or 0 as expected.

The function Slide does not work however, when the variable SldPnlState should be set by the onClick event passing the value using the function setSldPnlState. It does not seem like the value is being passed from the onClick event triggering the function or that somehow the script stops running.

You can demo the page at: http://dg-ad.com/Slide_Effect_Logic_Parameter.html

Attached is the code, if anyone has some suggestions I would really appreciate hearing from you:

<link href="G-Ad Main Style.css" rel="stylesheet" type="text/css" />
<!--begin setup Spry Effects-->
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<!--Begin pass variable from flagToggle parameter to SldPnlState variable includes printVar function to sent results to screen-->
<script language="javascript" type="text/javascript">

<!--begin set flag using onclick event-->
var SldPnlState = (1);
function setSldPnlState(flagToggle)
SldPnlState = flagToggle;
<!--end set flag using onclick event-->

<!--begin slider onclick event-->
<script type="text/javascript">
function MM_effectSlide(targetElement, duration, from, to, toggle, transition, fps, horizontal)
Spry.Effect.DoSlide(targetElement, {duration: 500, from: 0, to: 200, toggle: true, transition: 2, fps: 750, horizontal: true});
<!--end slider onclick event-->

<!--begin write variable onclick event-->
<script type="text/javascript">
function printVar()
document.getElementById('test_display').innerHTML = SldPnlState
<!--end write variable onclick event-->

<body id="wrapper">
<div style="padding-top:50px;">
<a href="#" onclick="setSldPnlState(1);">Set var SldPnlState to Flag Status Set Open (1)</a><br><br><br>

<a href="#" onclick="setSldPnlState(0);">Set var SldPnlState to Flag Status Set Closed (0)</a><br><br><br>

<a href="#" onclick="printVar();">Print Flag Status to Screen</a><br><br><br>

<div id="test_display" style="border:#9CC thick groove; width:50px; height:50px; margin:15px; text-align:center; font-size:36px;"></div>

<a href="#" onclick="MM_effectSlide('PF_Text_Panel');">Slide Panel</a><br><br>

<div id="PF_Text_Panel" style="border:#9C9 thick solid; height:250px; margin-top:25px;">
<div id="PF_Text" class="PF_Text">
<script type="text/javascript">
var panelWidget_1=new Spry.Widget.HTMLPanel('PF_Text');