Click to See Complete Forum and Search --> : Variable problem....


CIAwallst
07-27-2003, 05:56 PM
Greetings,

I'm having some trouble understanding a variable flag in this bit of code. The "SHOW" variable is what I can't understand.

function showhide(target, show)
{

var pic = document.getElementById(target);
if (pic)
{
if (show) { pic.className = 'show';}
else { pic.className = 'hide'; }
}
}

I thought (pix[i] == which)); is an array variable in the previous function..? How does it end up being a boolean value in the next function. In other words is the "showhide" function checking the variable "show" for it's existence or for it's value. An alert(show) shows boolean and I can't understand why. I've posted the entire code below. If anyone can help me pull my head out of my UKNOWHAT I'd be very grateful. Thanks.

//////////////THE FULL CODE//////// Via Tim Bray
<script>

var pix = [ 2, 4, 6, 8, 10, 12, 14, 16, 18 ];
function turnon(which)
{
var i;
for (i = 0; i < pix.length; i++)
{
showhide('d' + pix[i], (pix[i] == which));
showhide('o' + pix[i], (pix[i] == which));
}
(pix[i] == which))
function showhide(target, show)
{

var pic = document.getElementById(target);
if (pic)
{
if (show) { pic.className = 'show';}
else { pic.className = 'hide'; }
}
}
</script>


<table>
<tr align="center" valign="top">
<td><a href='/ongoing/When/200x/2003/06/09/Happiness'><img width="100" onMouseOver="turnon(2)" src="Happiness.png" /></a></td>

<td><a href='/ongoing/When/200x/2003/06/08/BitBucket'><img width="100" onMouseOver="turnon(4)" src="BitBucket.png" /></a></td>
<td><a href='/ongoing/When/200x/2003/05/22/FromSpace'><img width="100" onMouseOver="turnon(6)" src="Bits1.png" /></a></td></tr>
<tr align="center" valign="middle">
<td><a href='WetPinkRose'><img width="100" onMouseOver="turnon(10)" src="WetPinkRose.png" /></a></td>
<td><a href='/ongoing/When/200x/2003/05/06/2000Pix'><img width="100" onMouseOver="turnon(12)" src="Glacier.png" /></a></td>
<td><a href='/ongoing/When/200x/2003/05/21/Nuremberg'><img width="100" onMouseOver="turnon(14)" src="Nuremberg-2.png" /></a></td>
</tr>
<tr align="center" valign="bottom">
<td><a href='/ongoing/When/200x/2003/06/29/BigSmall'><img width="100" onMouseOver="turnon(16)" src="YellowHat.png" /></a></td>
<td><a href='/ongoing/When/200x/2003/05/07/MacYear'><img width="100" onMouseOver="turnon(8)" src="red-stripe.png" /></a></td>
<td><a href='/ongoing/When/200x/2003/06/29/BigSmall'><img width="100" onMouseOver="turnon(18)" src="Small.png" /></a></td></tr>
<tr valign="top">
<td colspan="3">
<table>
<tr valign="top">
<td align="right"><b>When:</b></td>

<td align="left">
<span class="hide" id="d2">2003/06/09</span>
<span class="hide" id="d4">2003/06/08</span>
<span class="hide" id="d6">2003/05/22</span>
<span class="hide" id="d8">2003/05/07</span>
<span class="hide" id="d10">2003/05/24</span>
<span class="hide" id="d12">2003/05/06</span>
<span class="hide" id="d14">2003/05/21</span>
<span class="hide" id="d16">2003/06/29</span>

<span class="hide" id="d18">2003/06/29</span>
</td>
</tr>
<tr valign="top">
<td align="right"><b><span class="o">ongoing</span></b>:</td>
<td align="left">
<span class="hide" id="o2"><a href='/ongoing/When/200x/2003/06/09/Happiness'>The Picture of Happiness</a></span>
<span class="hide" id="o4"><a href='/ongoing/When/200x/2003/06/08/BitBucket'>A Working Bit Bucket</a></span>
<span class="hide" id="o6"><a href='/ongoing/When/200x/2003/05/22/FromSpace'>Pix From Mars</a></span>
<span class="hide" id="o8"><a href='/ongoing/When/200x/2003/05/07/MacYear'>iYear</a></span>

<span class="hide" id="o10"><a href='/ongoing/When/200x/2003/05/24/WetPinkRose'>Wet Pink</a></span>
<span class="hide" id="o12"><a href='/ongoing/When/200x/2003/05/06/2000Pix'>Glacier, God, Cat</a></span>
<span class="hide" id="o14"><a href='/ongoing/When/200x/2003/05/21/Nuremberg'>Domestic Nürnberg</a></span>
<span class="hide" id="o16"><a href='/ongoing/When/200x/2003/06/29/BigSmall'>Big, Small, and More</a></span>
<span class="hide" id="o18"><a href='/ongoing/When/200x/2003/06/29/BigSmall'>Big, Small, and More</a></span>
</td>
</tr>
</table>
</td>
</tr>
</table>

Exuro
07-27-2003, 08:37 PM
Okay, this is what happens:

1. turnon() is called from the body with the number of a picture as an argument.

2. Inside turnon(), the function showhide() is called. There are two arguments passed in. The first is the image's ID. The second is a boolean value (true/false) determined by (pix[i] == which). What that line of code says is, "Does the picture we're working with have the same number as the one passed in?"

3. The boolean value show in the function showhide() is the same value as the second argument that was passed in above. So if the picture had the same number as the one passed in, then it's true, and if not, it's false.

4. So it goes through the function and says if(show), or if the picture is the one that was passed in, and then sets the visibility to true if it was. Else, it sets the visibility to false.

Did that make sense? I hope so... Anyway, hope that answers your queston!