www.webdeveloper.com
Results 1 to 5 of 5

Thread: Complete Newbie, can someone please help get this to work.

  1. #1
    Join Date
    Aug 2006
    Posts
    5

    Complete Newbie, can someone please help get this to work.

    My first attempt at javascript. I'm trying to build this calculator but can't seem to get part of the script (in red) to work. Can someone explain what I've done wrong.

    Thanks


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coil Cord Calculator</title>
    </head>

    <body>

    <script language="JavaScript">

    function calculate()
    {
    A1 = document.catalog_form.a1.value
    B1 = document.catalog_form.b1.value
    C1 = (B1/A1)
    document.catalog_form.c1.value = C1

    MS = document.catalog_form.maSize.value
    CCD = ((1.2*MS)+(2*A1))
    document.catalog_form.CCD.value = CCD

    FCCB =((3.14159*B1)*(CCD-A1)/A1)/12
    document.catalog_form.FCCB.value = FCCB

    TanA = document.catalog_form.TanA.value
    TanB = document.catalog_form.TanB.value
    FCCC = FCCB+((TanA+TanB)/12)
    document.catalog_form.FCCC.value = FCCC

    jacket = document.catalog_form.jacket.value
    ExtNoTan = jacket*FCCB
    MinEx =ExtNoTan+(0.12*ExtNoTan)
    document.catalog_form.MinEx.value = MinEx
    MaxEx =MinEx+(0.24*MinEx)
    document.catalog_form.MaxEx.value = MaxEx

    }

    function displayPercent(jacket)
    {
    document.getElementById("ExtPer").value=jacket
    }

    </script>


    <form name="catalog_form">
    <table width="946" border="1" cellpadding="3" cellspacing="5">
    <tr>
    <td colspan="5" align="center"><h1>Coil Cord Calculator</h1> </td>
    </tr>
    <tr>
    <td width="268">&nbsp;</td>
    <td width="315">&nbsp;</td>
    <td width="93">Round</td>
    <td width="89">Flat</td>
    <td width="139"></td>
    </tr>
    <tr>
    <td width="268">Cable Major OD: <input type="text" name="a1"></td>
    <td width="315"># Coils in Cord:
    <input type="text" name="c1" >
    </td>
    <td width="93">&nbsp;</td>
    <td width="89">&nbsp;</td>
    <td width="139">&nbsp;</td>
    </tr>
    <tr>
    <td>Cable Minor OD: <input type="text" name="MinorOD" onChange=calculate();></td>
    <td>Coil Diameter:
    <input type="text" name="CCD" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Mandrel Size: <input type="text" name="maSize" onChange=calculate();></td>
    <td>Ft. of Cable in Coil Body::
    <input type="text" name="FCCB" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Body Length: <input type="text" name="b1" onChange=calculate();></td>
    <td>Ft. of Cable in Coil Cord:
    <input type="text" name="FCCC" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Tangent A: <input type="text" name="TanA" onChange=calculate();></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Tangent B: <input type="text" name="TanB" onChange=calculate();></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td></td>
    <td>Minimum Extended:
    <input type="text" name="MinEx" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Extension Percent: <input type="text" value=".70" id="ExtPer" />
    </td>
    <td>Extension Without Tangent:
    <input type="text" name="ExWTan" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td></td>
    <td>Maximum Extended:
    <input type="text" name="" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2" align="center">Cable Construction</td>
    <td colspan="2" align="center">Mandrel Sizes Available:</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2" valign="top"><p>
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".70" checked="checked">Polyurethane Jacket<br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".65">TPE Jacket<br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".60">Polypropylene or Hytrel primaries with PVC Jacket
    <br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".55">PVC primaries with PVC jacket
    <br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".50">Other<br /> </p></td>
    <td align="center"><p>1/8&quot;<br />
    3/16&quot;<br />
    5/16&quot;<br />
    .355&quot;<br />
    3/8&quot;<br />
    7/16&quot;<br />
    1/2&quot;<br />
    .720&quot;<br />
    1&quot;<br />
    3&quot;</p></td>
    <td align="center"><p>.125&quot;<br />
    .1875&quot;<br />
    .25&quot;<br />
    .355&quot;<br />
    .375&quot;<br />
    .4375&quot;<br />
    .500&quot;<br />
    .720&quot;<br />
    1&quot;<br />
    3&quot;</p></td>
    <td>&nbsp;</td>
    </tr>

    </table>

    </form>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    A) You should put ; at the end of each command.
    B) You have an input with no name, that I am assuming should be MaxEx.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Aug 2006
    Posts
    5
    WolfShade...Thanks for the reply. I appreciate you helping out and have applied your suggestions, unfortunately I am still encounter some error. Would you be able explain the areas in red. Thanks

    jacket = document.catalog_form.jacket.value;
    ExtNoTan = jacket*FCCB; //This part doesn't doesn't execute
    MinEx =ExtNoTan+(0.12*ExtNoTan); //Getting NaN in this field
    document.catalog_form.MinEx.value = MinEx;
    MaxEx =MinEx+(0.24*MinEx);//Getting NaN in this field
    document.catalog_form.MaxEx.value = MaxEx;

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    What is the error message?

    Try putting the formulas inside a parseFloat():
    Code:
    jacket = parseFloat(document.catalog_form.jacket.value);
    ExtNoTan = parseFloat(jacket*FCCB); //This part doesn't doesn't execute
    MinEx = parseFloat(ExtNoTan+(0.12*ExtNoTan)); //Getting NaN in this field
    document.catalog_form.MinEx.value = parseFloat(MinEx);
    MaxEx = parseFloat(MinEx+(0.24*MinEx));//Getting NaN in this field
    document.catalog_form.MaxEx.value = parseFloat(MaxEx);
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  5. #5
    Join Date
    Aug 2006
    Posts
    5
    I'm getting the same result. If you can view the page and and plug in some numbers in the first column it will execute code and populate other part of the form. The second column fields with red background indicate the problem areas. Thank you for help.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coil Cord Calculator</title>
    <script language="JavaScript">

    function calculate()
    {
    A1 = document.catalog_form.a1.value;
    B1 = document.catalog_form.b1.value;
    C1 = (B1/A1);
    document.catalog_form.c1.value = C1;

    MS = document.catalog_form.maSize.value ;
    CCD = ((1.2*MS)+(2*A1));
    document.catalog_form.CCD.value = CCD;

    FCCB =((3.14159*B1)*(CCD-A1)/A1)/12;
    document.catalog_form.FCCB.value = FCCB;

    TanA = document.catalog_form.TanA.value;
    TanB = document.catalog_form.TanB.value;
    FCCC = FCCB+((TanA+TanB)/12);
    document.catalog_form.FCCC.value = FCCC;

    jacket = parseFloat(document.catalog_form.jacket.value);
    ExtNoTan = parseFloat(jacket*FCCB);
    MinEx = parseFloat(ExtNoTan+(0.12*ExtNoTan));
    document.catalog_form.MinEx.value = parseFloat(MinEx);
    MaxEx = parseFloat(MinEx+(0.24*MinEx));
    document.catalog_form.MaxEx.value = parseFloat(MaxEx);
    }

    function displayPercent(jacket)
    {
    document.getElementById("ExtPer").value=jacket
    }

    </script>


    </head>

    <body>


    <form name="catalog_form">
    <table width="946" border="1" cellpadding="3" cellspacing="5">
    <tr>
    <td colspan="5" align="center"><h1>Coil Cord Calculator</h1> </td>
    </tr>
    <tr>
    <td width="268">&nbsp;</td>
    <td width="315">&nbsp;</td>
    <td width="93">Round</td>
    <td width="89">Flat</td>
    <td width="139"></td>
    </tr>
    <tr>
    <td width="268">Cable Major OD: <input type="text" name="a1" ></td>
    <td width="315"># Coils in Cord:
    <input type="text" name="c1" >
    </td>
    <td width="93">&nbsp;</td>
    <td width="89">&nbsp;</td>
    <td width="139">&nbsp;</td>
    </tr>
    <tr>
    <td>Cable Minor OD: <input type="text" name="MinorOD" onChange=calculate();></td>
    <td>Coil Diameter:
    <input type="text" name="CCD" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Mandrel Size: <input type="text" name="maSize" onChange=calculate();></td>
    <td>Ft. of Cable in Coil Body::
    <input type="text" name="FCCB" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Body Length: <input type="text" name="b1" onChange=calculate();></td>
    <td>Ft. of Cable in Coil Cord:
    <input type="text" name="FCCC" ></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Tangent A: <input type="text" name="TanA" onChange=calculate();></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Tangent B: <input type="text" name="TanB" onChange=calculate();></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td></td>
    <td>Minimum Extended:
    <input type="text" name="MinEx" style="background-color:red"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Extension Percent: <input type="text" value=".70" id="ExtPer" />
    </td>
    <td>Extension Without Tangent:
    <input type="text" name="ExWTan" style="background-color:red"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td></td>
    <td>Maximum Extended:
    <input type="text" name="MaxEx" style="background-color:red"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2" align="center">Cable Construction</td>
    <td colspan="2" align="center">Mandrel Sizes Available:</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2" valign="top"><p>
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".70" checked="checked">Polyurethane Jacket<br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".65">TPE Jacket<br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".60">Polypropylene or Hytrel primaries with PVC Jacket
    <br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".55">PVC primaries with PVC jacket
    <br />
    <input type="radio" name="jacket" onClick="displayPercent(this.value)" value=".50">Other<br /> </p></td>
    <td align="center"><p>1/8&quot;<br />
    3/16&quot;<br />
    5/16&quot;<br />
    .355&quot;<br />
    3/8&quot;<br />
    7/16&quot;<br />
    1/2&quot;<br />
    .720&quot;<br />
    1&quot;<br />
    3&quot;</p></td>
    <td align="center"><p>.125&quot;<br />
    .1875&quot;<br />
    .25&quot;<br />
    .355&quot;<br />
    .375&quot;<br />
    .4375&quot;<br />
    .500&quot;<br />
    .720&quot;<br />
    1&quot;<br />
    3&quot;</p></td>
    <td>&nbsp;</td>
    </tr>

    </table>

    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles