Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need A Bit Of Help

    Hi all
    I am trying to teach myself some basic javascript coding and have created a little calculator. It works great in Google Chrome but won't work in any other browser.
    I have spent ages going through it correcting errors and trying things I have learnt but I'm going no where fast.
    I suspect Google is very tolerant of code errors whilst Firefox and IE are not.
    I would really appreciate if someone has the time to cast their eye over what I've done and point me in the right direction.....just bear in mind I'm a real beginner.

    Here's what I've done - sorry if it is really messy code but basically its the functions a form and table layout to display everything.

    Thanks

    MikeUK

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <script language="javascript" type="text/javascript">
    var form = document.getElementById('myForm');
    var Total = document.form.elements.box1.value * document.form.elements.box2.value *
    
    document.form.elements.box4.value = total.toFixed(2);
    
    var Total2 = document.form.elements.box1.value * document.form.elements.box2.value *
    
    document.form.elements.box4.value = total2.toFixed(2);
    
    var Total3 = (document.form.elements.box1.value * document.form.elements.box2.value *
    
    document.form.elements.box4.value) - (document.form.elements.box1.value *
    
    document.form.elements.box2.value * document.form.elements.box4.value ) = total3.toFixed();
    
    function Total(form) {
    
    //code goes here
    
    //declare variables and assign box1 and box2.
    
    var form_field1 = Number(form.box1.value);
    
    var form_field2 = Number(form.box2.value);
    
    var form_field3 = Number(form.box3.value);
    
    var form_field4 = Number(form.box4.value);
    
    var form_field5 = Number(form.box5.value);
    
    
    //add the variables and update the total field value with the result.
    
    form.total.value = ((((form_field1 * form_field2 * form_field4) / 1000) * form_field5) *
    
    28).toFixed(2);
    
    
    }
    
    function Total2(form) {
    
    //code goes here
    
    //declare variables and assign box1 and box2.
    
    var form_field7 = Number(form.box1.value);
    
    var form_field8 = Number(form.box2.value);
    
    var form_field9 = Number(form.box3.value);
    
    var form_field10 = Number(form.box4.value);
    
    var form_field11 = Number(form.box5.value);
    
    
    //add the variables and update the total field value with the result.
    
    form.total2.value = ((((form_field7 * form_field9 * form_field10) / 1000) * form_field11) *
    
    28).toFixed(2);
    
    
    
    }
    
    function Total3(form) {
    
    //code goes here
    
    //declare variables and assign box1 and box2.
    
    var form_field13 = Number(form.box1.value);
    
    var form_field14 = Number(form.box2.value);
    
    var form_field15 = Number(form.box3.value);
    
    var form_field16 = Number(form.box4.value);
    
    var form_field17 = Number(form.box5.value);
    
    
    //add the variables and update the total field value with the result.
    
    form.total3.value = (((((form_field13 * form_field14 * form_field16) / 1000) * form_field17) * 28) -
    
    ((((form_field13 * form_field15 * form_field16) / 1000) * form_field17) * 28)).toFixed();
    
    
    
    
    
    }
    
    </script>
    </head>
    <body>
    <table border="0" width="450">
    <tbody>
    <tr>
    <!-- Row 1 --> <td width="100%">
    <div align="center">
    <p style="width: 451px; font-family: Century Gothic;"><span
    style="font-weight: bold; font-style: normal; text-decoration: none; font-size: 14pt;">What
    Savings Can
    You Give Me? </span></p>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    <form id="myForm" name="myForm">
    <table
    style="vertical-align: middle; text-align: left; width: 460px; height: 285px;"
    border="4" cellpadding="0" cellspacing="0">
    <tbody>
    <tr style="font-family: Lucida Sans; color: white;">
    <td colspan="2" rowspan="1"
    style="border: medium none ; vertical-align: middle; height: 15px;">
    <div
    style="text-align: center; vertical-align: middle; background-color: rgb(51, 204, 0);"><span
    style="font-weight: bold;">
    SAVINGS
    ESTIMATOR</span> </div>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; width: 340px; font-family: Lucida Sans;"><small>
    </small>
    <div style="margin-left: 5px;"><small>How many units are you
    thinking of buying? </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="5" maxlength="5"
    name="box1" value="1" type="text"> </td>
    </tr>
    <tr>
    <td style="vertical-align: top; font-family: Lucida Sans;"><small>
    </small>
    <div style="margin-left: 5px;"><small>What
    power are the units? </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="5" maxlength="5"
    name="box2" value="60" type="text"> </td>
    </tr>
    <tr>
    <td style="vertical-align: top; font-family: Lucida Sans;"><small>
    </small>
    <div style="margin-left: 5px;"><small>What
    power are the units you are considering? </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="5" maxlength="5"
    name="box3" value="5" type="text"> </td>
    </tr>
    <tr>
    <td style="vertical-align: top; font-family: Lucida Sans;"><small>
    </small>
    <div style="margin-left: 5px;"><small>How
    many hours are they run per
    day? </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="5" maxlength="5"
    name="box4" value="5" type="text"> </td>
    </tr>
    <tr>
    <td style="vertical-align: top; font-family: Lucida Sans;"><small>
    </small>
    <div style="margin-left: 5px;"><small>What does
    your electricity cost per
    KWh ()? </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="5" maxlength="5"
    name="box5" value="0.12" type="text"> </td>
    </tr>
    <tr>
    <td colspan="2" rowspan="1" valign="top" align="center"; font-family: Lucida Sans;"><br>
    <small>&nbsp; </small><input
    onclick="Total(form);Total2(form);Total3(form)"
    value="Click Here To Calculate Savings" type="button">
    <br><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; font-family: Lucida Sans; background-color: silver; font-weight: bold;"><small>
    </small>
    <div style="margin-left: 5px;"><small>Cost
    per month with existing units ()<br>
    </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="8" maxlength="8"
    name="total" type="text"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; font-family: Lucida Sans; background-color: silver; font-weight: bold;"><small>
    </small>
    <div style="margin-left: 5px;"><small>Cost
    per month with new units ()<br>
    </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="8" maxlength="8"
    name="total2" type="text"><br>
    </td>
    </tr>
    <tr>
    <td colspan="2" rowspan="1"
    style="vertical-align: top; font-family: Lucida Sans;"><small>&nbsp; </small><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; font-family: Lucida Sans; background-color: rgb(51, 204, 0);"><small>
    </small>
    <div
    style="margin-left: 5px; background-color: rgb(51, 204, 0);"><small><big
    style="color: white;"><span style="font-weight: bold;">Estimated
    Energy Savings
    per month ()</span></big><br>
    </small></div>
    <small> </small></td>
    <td style="vertical-align: top;"><input size="8" maxlength="8"
    name="total3" type="text"><br>
    </td>
    </tr>
    <tr>
    <td
    style="vertical-align: top; font-family: Lucida Sans; background-color: white;"
    rowspan="1" colspan="2">
    <div style="margin-left: 5px;"><font
    style="color: rgb(153, 153, 153);" size="-1"><span
    style="font-family: Lucida Sans;"><br>
    </div>
    <br>
    </td>
    </tr>
    </tbody>
    </table>
    </form>
    <br>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    You have a variable and a function both with the same name - Total.
    Same with Total2 and Total3.

    It does indeed work in Chrome - but I am surprised!

    Why not name the form field values var ff13 or whatever rather than the long-winded var form_field13? Extra typing!

    You can trap NaN entries with
    var ff1 = Number(form.box1.value) || 0;


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    This doesn't make any sense, to me:
    Code:
    var form = document.getElementById('myForm');
    var Total = document.form.elements.box1.value * document.form.elements.box2.value;
    form is now already a reference to your <form>.

    So the code should be simply:
    Code:
    var form = document.getElementById('myForm');
    var Total = form.box1.value * form.box2.value;
    and so on.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, I see.

    *ALL* of THIS CODE is total trash and is doing *NOTHING* on that page except getting errors:
    Code:
    var form = document.getElementById('myForm');
    var Total = document.form.elements.box1.value * document.form.elements.box2.value *
    
    document.form.elements.box4.value = total.toFixed(2);
    
    var Total2 = document.form.elements.box1.value * document.form.elements.box2.value *
    
    document.form.elements.box4.value = total2.toFixed(2);
    
    var Total3 = (document.form.elements.box1.value * document.form.elements.box2.value *
    
    document.form.elements.box4.value) - (document.form.elements.box1.value *
    
    document.form.elements.box2.value * document.form.elements.box4.value ) = total3.toFixed();
    But it doesn't matter, because the functions work and they are actually the only code you need.

    Remove all of the above code. It is doing nothing whatsoever.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    MikeUK (02-19-2013)

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,729
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by Old Pedant View Post
    Oh, I see.

    *ALL* of THIS CODE is total trash and is doing *NOTHING* on that page except getting errors:
    But it doesn't matter, because the functions work and they are actually the only code you need.

    Remove all of the above code. It is doing nothing whatsoever.
    Yes, that is the reason for it not working. I still don't know why it worked in Chrome.

    Why are you calling three separate functions?
    That results in a lot of duplication and pointless repetition which is very confusing:-

    var form_field1 = Number(form.box1.value);
    var form_field7 = Number(form.box1.value);
    var form_field13 = Number(form.box1.value);

    But box1 is really meaningless - why not give it a descriptive name such as "units"? And "hours" instead of box4? And so on for all your fields.


    In short, your code could be greatly simplified and also clarified.
    Last edited by Philip M; 02-19-2013 at 09:18 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    MikeUK (02-19-2013)

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks all for your input - I'm going to take onboard the feedback and rewrite the code to make it cleaner and easier to follow. Also need to revisit the javascript documents I was learning from and work out where I fell over.

    Thanks again

    MikeUK


  •  

    Posting Permissions

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