Question:

My Javascript is broken. :( Please help?

by | earlier

I have this script running on a page (inline):

<script type="text/javascript">

var on="block";

var off="none";

var x1=x2=x3=off;

function showDescription()

{

if (x==1)

{

document.getElementById("desc1").style...

}

else if (x==2)

{

document.getElementById("desc2").style...

}

else if (x==3)

{

document.getElementById("desc3").style...

}

x1=x2=x3=off;

}

</script>

I have these links:

<a href="#description" onclick="showDescript(x1=on); return false;"><img src="../TKF/temp.jpg" border="0"></a>

<a href="#description" onclick="showDescript(x2=on); return false;"><img src="../TKF/temp.jpg" border="0"></a>

<a href="#description" onclick="showDescript(x3=on); return false;"><img src="../TKF/temp.jpg" border="0"></a>

Those links link to these <div>s:

<div id="desc1" class="description">



<img src="../TKF/red.jpg" align="right">

Fabric type: Gingham

<p>

Machine washable

<p>

S,M,L - $50

<p>



<p><form NAME=order>

Quantity:

<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.val... value="1">

<input type=hidden name="PRICE" value="19.95">

<input type=hidden name="NAME" value="Long Cloak - Red">

<input type=hidden name="ID_NUM" value="1001">

<input type=hidden name="SHIPPING" value="5.95">

<p>

Select a size:

<select name=ADDITIONALINFO2>

<option value="Small"> Small

<option value="Medium"> Medium

<option value="Large">Large

</select>

<input type="button" value=' Add to Cart ' onClick='AddToCart(this.form)'>

<a href="Cart.html">View Cart</a>

</form>



</div>

<div id="desc2" class="description">



<img src="../TKF/grey.jpg" align="right">

Fabric type: Gingham

<p>

Machine washable

<p>

S,M,L - $50

<p>



<p><form NAME=order>

Quantity:

<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.val... value="1">

<input type=hidden name="PRICE" value="19.95">

<input type=hidden name="NAME" value="Long Cloak - Red">

<input type=hidden name="ID_NUM" value="1001">

<input type=hidden name="SHIPPING" value="5.95">

<p>

Select a size:

<select name=ADDITIONALINFO2>

<option value="Small"> Small

<option value="Medium"> Medium

<option value="Large">Large

</select>

<input type="button" value=' Add to Cart ' onClick='AddToCart(this.form)'>

<a href="Cart.html">View Cart</a>

</form>



</div>

<div id="desc3" class="description">



<img src="../TKF/black.jpg" align="right">

Fabric type: Gingham

<p>

Machine washable

<p>

S,M,L - $50

<p>



<p><form NAME=order>

Quantity:

<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.val... value="1">

<input type=hidden name="PRICE" value="19.95">

<input type=hidden name="NAME" value="Long Cloak - Red">

<input type=hidden name="ID_NUM" value="1001">

<input type=hidden name="SHIPPING" value="5.95">

<p>

Select a size:

<select name=ADDITIONALINFO2>

<option value="Small"> Small

<option value="Medium"> Medium

<option value="Large">Large

</select>

<input type="button" value=' Add to Cart ' onClick='AddToCart(this.form)'>

<a href="Cart.html">View Cart</a>

</form>



</div>

I know nothing about javascript, I merely used what someone told me to do. It doesn't work however, and any advice would be greatly appriciated. The idea is to have each link open in the same spot and replace any link that might already be open. Thank you so much!

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

2 ANSWERS

Sort By: Date | Rating

Error:

Problem at line 7 character 8: Variable x2 was not declared correctly.

var x1=x2=x3=off;
Report (0) (0) | earlier
"I merely used what someone told me to do"

No you did not!!!!! Look at my answer and the script in it again in my answer to your previous question!!

"Error:

Problem at line 7 character 8: Variable x2 was not declared correctly."

That error occurred because you did not implement my script correctly. The variable declarations themselves are o.k., but the error occurs because of the incorrect values being searched for in the if and else if statements which are not supposed to be there in the first place.

<script type="text/javascript">

var on = "block";

var off = "none";

var x1=x2=x3=off;

function showDescription()

{

document.getElementById ("desc1").style.display = x1;

document.getElementById ("desc2").style.display = x2;

document.getElementById ("desc3").style.display = x3;

x1=x2=x3=off;

}

</script>

That is what I told you to do. Make sure the script is in the head section of your page and NOT in the body.

Also, in your <a> tags you have it wrong. Should be:

<a href="#" onclick="showDescription(x1=on); return false;">

Note you had the function name wrong in the onclicks.

And I noted you are actually using <a href="#description" -the only reason you could want to do that is if you are trying to link to a location lower down on a long page. And that will not work with the return false in the onclicks -you could take the return false; out of them. It also will not work because you are referencing a class ("description") instead of the id. So here is how it should really be, the way you are using it:

<!DOCTYPE -be sure you are using one of these!!!

<html>

<head>

<title></title>

<style type="text/css">

.description { display:none; }

</style>

<script type="text/javascript">

var on = "block";

var off = "none";

var x1=x2=x3=off;

function showDescription()

{

document.getElementById ("desc1").style.display = x1;

document.getElementById ("desc2").style.display = x2;

document.getElementById ("desc3").style.display = x3;

x1=x2=x3=off;

}

</script>

</head>

<body>

<p>

<a href="#desc1" onclick="showDescription(x1=on)">Image here</a>

<a href="#desc2" onclick="showDescription(x2=on)">Image here</a>

<a href="#desc3" onclick="showDescription(x3=on)">Image here</a>

</p>

<p>Lots and lots of stuff in this area between the links and the hidden div's is why you are trying to link to further down the page with- href="#desc1"??? If NOT, then the <a href's should have just- ="#" instead and the onclicks should have the ;return false; at the end of them.</p>

<div id="desc1" class="description">Put stuff in here this is "desc1" hidden div</div>

<div id="desc2" class="description">Put stuff in here this is "desc2" hidden div</div>

<div id="desc3" class="description">Put stuff in here this is "desc3" hidden div</div>

</body>

</html>

If you still have trouble, unblock your e-mail (your address will not be displayed -not even to the recipient) and e-mail me direct. Maybe you could give me a link to the page and I will fix it for you.
Report (0) (0) | earlier