PDA

Click to See Complete Forum and Search --> : beginning javascripter: onclick image swap problems -- probably an easy fix

tomjonesrocks
12-05-2003, 07:17 PM
Hello everyone--

I'm trying to do some javascipt that shows/hides a form field by clicking an image. When the user starts off, the image is a "+". When the image is clicked, I want the image to change to a "-", and then go back to a "+" when clicked again. In other words, go back and forth between "+" and "-".

I'm halfway there. The code I created hides and shows the form field, and when the button is clicked initially it swaps the image. Unfortunately, I don't know how to set up a loop so it calls the "+" image the next time. After it swaps once, it's done and won't swap anymore.

Here's my code--this is probably very easy for someone experienced with this. Any help would be appreciated! Thanks!

(this code works-show/hide)

<script LANGUAGE="JavaScript">
<!--
var noteVisible = false;

function showNote(branch) {
showHide(branch);
if (noteVisible)
noteVisible = false;

else {
noteVisible = true;
}
}

//-->
</SCRIPT>


(this code does not swap the images the way I want)

<script>
// these are for our pictures
var image1 = new Image();
image1.src = "images/bttn_show_analyze.gif";

var image2 = new Image();
image2.src = "images/bttn_hide_analyze.gif";


function change_image(val) {
if (val == 0) {
document["pic"].src = image1.src;

} else {
document["pic"].src = image2.src;
}
}
</script>


(HTML)


<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="Label01"><!-- return true; -->
<div class="trigger" onClick="showNote('notespan'); change_image(2);"><img

src="images/bttn_show_analyze.gif" alt="Show Analyze Data" width="159" height="17" border="0" name="pic"></div>
</td>
</tr>
<tr>
<td align="right">
<div class="Label01">
<span class="branch" id="notespan">
<TEXTAREA rows="10" cols="100"><%= cqfb.getClaimAnalysis()== null ? " " :

cqfb.getClaimAnalysis()%></TEXTAREA>
</span>
</div>
</td>
</tr>
</table>
leonardo43
12-06-2003, 03:23 AM
If the code you've provided is presented correctly, then there's an error in your coding.

You don't have curly braces around the "if" statement of the function showNote()

The initial state of the variable notVisible is set to "false", so on first use of the function it drops into the "else" part of the function, where upon it's reset to "true" and your image changes.

The next time you use it, because the script is missing the curly braces the script interpreter can't work out what to do. It can't find a conditional case for "true", so it just falls through to the bottom of the function, after which notVisible stays "true". it won't work anymore or get changed to "false".

I'm surprised your browser isn't throwing a script error alert, or maybe you've got it unselected.


Try this -

function showNote(branch) {
showHide(branch);
if (noteVisible) {
noteVisible = false;
}
else {
noteVisible = true;
}
}


If this doesn't work {
then try something else
}
Pittimann
12-06-2003, 03:34 AM
Hi!

The curly braces aren't necessary, if the condition is followed by only one statement.

Regardless of the code above -

if () then do this; - works

if (){ - more than 1 thing to be done
then do this and;
do that...;
}

Cheers - Pit
Pittimann
12-06-2003, 03:54 AM
Hi!

Here's some code you can play with:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
var image1 = new Image();
image1.src = "show.gif";
var image2 = new Image();
image2.src = "hide.gif";
function changeimage() {
if (document.pic.src == image1.src) {
document.pic.src = image2.src;
document.pic.alt = "Show Analyze Data";
document.getElementById('notespan').style.visibility="hidden";
}
else {
document.pic.src = image1.src;
document.pic.alt = "Hide Analyze Data";
document.getElementById('notespan').style.visibility="visible";
}
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="Label01">
<div class="trigger" onClick="changeimage();"><img src="hide.gif" alt="Show Analyze Data" width="159" height="17" border="0" name="pic"></div>
</td>
</tr>
<tr>
<td align="right">
<div class="Label01">
<span class="branch" id="notespan" style="visibility: hidden">
<TEXTAREA rows="10" cols="100">blah</TEXTAREA>
</span>
</div>
</td>
</tr>
</table>
</body>
</html>

Cheers - Pit