Question:

My Javascript is broken. :( Please help?

by  |  earlier

0 LIKES UnLike

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">

<!-- HIDDEN CONTENT (until selected from thumbnail) -->

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

Fabric type: Gingham

<p>

Machine washable

<p>

S,M,L - $50

<p>

<!--Shopping Cart Product Begin-->

<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>

<!--Shopping Cart Product End -->

</div>

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

<!-- HIDDEN CONTENT (until selected from thumbnail) -->

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

Fabric type: Gingham

<p>

Machine washable

<p>

S,M,L - $50

<p>

<!--Shopping Cart Product Begin-->

<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>

<!--Shopping Cart Product End -->

</div>

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

<!-- HIDDEN CONTENT (until selected from thumbnail) -->

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

Fabric type: Gingham

<p>

Machine washable

<p>

S,M,L - $50

<p>

<!--Shopping Cart Product Begin-->

<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>

<!--Shopping Cart Product End -->

</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

2 ANSWERS


  1. Error:

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

    var x1=x2=x3=off;


  2. &quot;I merely used what someone told me to do&quot;

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

    &quot;Error:

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

    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.

    &lt;script type=&quot;text/javascript&quot;&gt;

    var on = &quot;block&quot;;

    var off = &quot;none&quot;;

    var x1=x2=x3=off;

    function showDescription()

    {

    document.getElementById (&quot;desc1&quot;).style.display = x1;

    document.getElementById (&quot;desc2&quot;).style.display = x2;

    document.getElementById (&quot;desc3&quot;).style.display = x3;

    x1=x2=x3=off;

    }

    &lt;/script&gt;

    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 &lt;a&gt; tags you have it wrong. Should be:

    &lt;a href=&quot;#&quot; onclick=&quot;showDescription(x1=on); return false;&quot;&gt;

    Note you had the function name wrong in the onclicks.

    And I noted you are actually using &lt;a href=&quot;#description&quot; -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 (&quot;description&quot;) instead of the id. So here is how it should really be, the way you are using it:

    &lt;!DOCTYPE -be sure you are using one of these!!!

    &lt;html&gt;

    &lt;head&gt;

    &lt;title&gt;&lt;/title&gt;

    &lt;style type=&quot;text/css&quot;&gt;

    .description { display:none; }

    &lt;/style&gt;

    &lt;script type=&quot;text/javascript&quot;&gt;

    var on = &quot;block&quot;;

    var off = &quot;none&quot;;

    var x1=x2=x3=off;

    function showDescription()

    {

    document.getElementById (&quot;desc1&quot;).style.display = x1;

    document.getElementById (&quot;desc2&quot;).style.display = x2;

    document.getElementById (&quot;desc3&quot;).style.display = x3;

    x1=x2=x3=off;

    }

    &lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;

    &lt;p&gt;

    &lt;a href=&quot;#desc1&quot; onclick=&quot;showDescription(x1=on)&quot;&gt;Image here&lt;/a&gt;

    &lt;a href=&quot;#desc2&quot; onclick=&quot;showDescription(x2=on)&quot;&gt;Image here&lt;/a&gt;

    &lt;a href=&quot;#desc3&quot; onclick=&quot;showDescription(x3=on)&quot;&gt;Image here&lt;/a&gt;

    &lt;/p&gt;

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

    &lt;div id=&quot;desc1&quot; class=&quot;description&quot;&gt;Put stuff in here this is &quot;desc1&quot; hidden div&lt;/div&gt;

    &lt;div id=&quot;desc2&quot; class=&quot;description&quot;&gt;Put stuff in here this is &quot;desc2&quot; hidden div&lt;/div&gt;

    &lt;div id=&quot;desc3&quot; class=&quot;description&quot;&gt;Put stuff in here this is &quot;desc3&quot; hidden div&lt;/div&gt;

    &lt;/body&gt;

    &lt;/html&gt;

    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.

Question Stats

Latest activity: earlier.
This question has 2 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.
Unanswered Questions