Simple Calculation in Form - 3 textboxes - 1 function

Discussion in 'Javascript' started by rdavis7408@gmail.com, Jan 24, 2006.

  1. Guest

    I am attempting what I would think would be a simple calculation of the
    cost of traveling a single mile. But I can not figure this out. The
    following is my script. Any help would be appreciated.

    I want the user to enter the price per gallon in one textbox, the miles
    per gallon in the next textbox and then press the button and get the
    cost per gallon by dividing the price per gallon by the miles per
    gallon.


    Thank you in advance
    <HTML>

    <HEAD>

    <TITLE> "CALCULATE FUEL COST" </TITLE>



    <SCRIPT LANGUAGE = "JavaScript">


    function fuelCalculator() {
    var costpergallon;
    costpergallon= document.form1.ppg.value / document.form1.mpg.value;
    document.form1.cpg.value = costpergallon;
    document.write(costpergallon);
    }


    </ script>
    </head>
    <Body>
    <form name ="form1">

    <input type="text" name="ppg" value=0 /> </br>
    <input type="text" name="mpg" value=0 /> </br>
    <input type="text" name="cpg" value=0 /> </br>

    <input type= "button" value="Calculate" onclick="fuelCalculator();" />



    </form>

    </body>

    </html>
    , Jan 24, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > I am attempting what I would think would be a simple calculation of the
    > cost of traveling a single mile. But I can not figure this out. The
    > following is my script. Any help would be appreciated.


    You should say what you think is going wrong - error messages, results, etc.


    > I want the user to enter the price per gallon in one textbox, the miles
    > per gallon in the next textbox and then press the button and get the
    > cost per gallon by dividing the price per gallon by the miles per
    > gallon.
    >

    [...]
    >
    > <SCRIPT LANGUAGE = "JavaScript">


    The language attribute is deprecated, type is required.

    <script type="text/javascript">

    > function fuelCalculator() {
    > var costpergallon;
    > costpergallon= document.form1.ppg.value / document.form1.mpg.value;
    > document.form1.cpg.value = costpergallon;
    > document.write(costpergallon);


    document.write will completely replace the content of the document with
    the value of costpergallon. Just get rid of that line.

    Also be aware that the values of text inputs are type string. Because
    you are using division, they are automatically converted to numbers for
    the calculation and costpergallon will be a type number (the same
    happens with multiplication and division too).

    If attempting addition, strings will be concatenated:

    var x='1', y='2'; // x and y are strings
    alert(x + y) // shows 12 - x & y concatenated
    alert(x / y) // shows 0.5 - x divided by y
    alert(x + y) // shows 12 - x & y are still strings

    To make x & y numbers for the sake of addition, use the unary '+' operator:

    alert(+x + +y) // shows 3 - x & y added


    Or double subtraction:

    alert(x - -y) // shows 3 - x & y added


    > }
    >
    >
    > </ script>



    Typo?

    </script>

    [...]


    --
    Rob
    RobG, Jan 24, 2006
    #2
    1. Advertising

  3. Lee Guest

    said:

    > function fuelCalculator() {
    > var costpergallon;
    > costpergallon= document.form1.ppg.value / document.form1.mpg.value;
    > document.form1.cpg.value = costpergallon;
    > document.write(costpergallon);


    Get rid of that document.write().
    I'm guessing it was only debugging, anyway.

    > }
    >
    >
    ></ script>


    There's your real problem. Get rid of the space before "script".
    Lee, Jan 24, 2006
    #3
  4. McKirahan Guest

    <> wrote in message
    news:...
    > I am attempting what I would think would be a simple calculation of the
    > cost of traveling a single mile. But I can not figure this out. The
    > following is my script. Any help would be appreciated.
    >
    > I want the user to enter the price per gallon in one textbox, the miles
    > per gallon in the next textbox and then press the button and get the
    > cost per gallon by dividing the price per gallon by the miles per
    > gallon.
    >
    >
    > Thank you in advance
    > <HTML>
    > <HEAD>
    > <TITLE> "CALCULATE FUEL COST" </TITLE>
    > <SCRIPT LANGUAGE = "JavaScript">
    > function fuelCalculator() {
    > var costpergallon;
    > costpergallon= document.form1.ppg.value / document.form1.mpg.value;
    > document.form1.cpg.value = costpergallon;
    > document.write(costpergallon);
    > }
    > </script>
    > </head>
    > <Body>
    > <form name ="form1">
    > <input type="text" name="ppg" value=0 /> </br>
    > <input type="text" name="mpg" value=0 /> </br>
    > <input type="text" name="cpg" value=0 /> </br>
    > <input type= "button" value="Calculate" onclick="fuelCalculator();" />
    > </form>
    > </body>
    > </html>


    What the difference between "price per gallon" and "cost per gallon"?

    Your code works under IE5.5 -- at least the math...

    However,
    a) It should be: "text/javascript">
    b) you have a space in "</ script>".
    c) what "document.write(costpergallon);"?
    d) you don't round the result.
    e) labels for the input fields would help!
    f) you might want to use "parseFloat()".

    BTW, people don't usually know how many miles per gallon
    they get!

    The cost per gallon is what one pays at the pump.

    I note the cost to fill up and the mileage; when I fill it up again
    I note the mileage then calculate the mileage difference and divide
    that into the cost I paid to fill it up. For example:

    Ending mileage: 10,200
    Starting mileage: 10,000
    Difference: 200

    Cost to fill up: $50.00
    Gals. to fill up: 20

    Cost per mile: $50.00 / 200 = $0.25
    McKirahan, Jan 24, 2006
    #4
  5. Guest

    Honestly , you code should be as follows:

    <HTML>

    <HEAD>

    <TITLE> "CALCULATE FUEL COST" </TITLE>

    <SCRIPT LANGUAGE = "JavaScript">

    function fuelCalculator() {
    var iPPG = document.getElementById("ppg").value ;
    var iMPG = document.getElementById("mpg").value ;
    document.getElementById("cpg").value = parseFloat(iPPG) /
    parseFloat(iMGP) ;
    }

    </ script>
    </head>
    <Body>

    <input type="text" id="ppg" value=0 /> </br>
    <input type="text" id="mpg" value=0 /> </br>
    <input type="text" id="cpg" value=0 /> </br>

    <button onclick="fuelCalculator();">Calculate</button>


    </body>

    </html>

    Unless you're submitting the form you don't need the <form /> tag and
    the old <input type=button" /> is slightly out dated as well. Remember
    with js all vars are objects, you need to hint to the engine what you
    want it to do with them; hence parseFloat().
    , Jan 24, 2006
    #5
  6. Zif Guest

    wrote:
    > Honestly , you code should be as follows:


    Honestly, don't.


    >
    > <HTML>
    >
    > <HEAD>
    >
    > <TITLE> "CALCULATE FUEL COST" </TITLE>
    >
    > <SCRIPT LANGUAGE = "JavaScript">


    The language attribute is deprecated whereas the type attribute is required.

    <SCRIPT type="javascript">


    > function fuelCalculator() {
    > var iPPG = document.getElementById("ppg").value ;


    Support for DOM methods should be tested before attempting to use them.
    The forms collection is more widely supported and is probably better
    to use here.


    > var iMPG = document.getElementById("mpg").value ;
    > document.getElementById("cpg").value = parseFloat(iPPG) /
    > parseFloat(iMGP) ;


    Don't allow auto-wrapping to wrap code, it will almost certainly
    introduce errors.


    > }
    >
    > </ script>
    > </head>
    > <Body>
    >
    > <input type="text" id="ppg" value=0 /> </br>


    XHTML-style tags are invalid markup in an HTML document.

    <input type="text" id="ppg" value=0><br>


    XHTML requires all tag and attribute names to be in lower case (but this
    isn't XHTML so it's of no consequence).


    > <input type="text" id="mpg" value=0 /> </br>
    > <input type="text" id="cpg" value=0 /> </br>
    >
    > <button onclick="fuelCalculator();">Calculate</button>


    The default type for a button element is submit, so that should be:

    <button type="button" onclick="fuelCalculator();">Calculate</button>


    It likely makes no difference outside a form, but it should be included
    as the button may find its way into a form (the OP has shown a
    preference to use a form) where its default type of submit will cause a
    problem.


    > </body>
    >
    > </html>
    >
    > Unless you're submitting the form you don't need the <form /> tag and


    A form element isn't necessary but document.forms is more widely
    supported than getElementById. It is also easier to use to get
    references to form controls than using getElementById to get references
    to random elements.

    e.g.

    <script type="text/javascript">
    function fuelCalculator(f)
    {
    f.cpg.value = f.ppg.value/f.mpg.value;
    }
    </script>

    <form action="">
    <table>
    <tr>
    <td>Cents per gallon:</td>
    <td><input type="text" name="ppg" value=0></td>
    </tr><tr>
    <td>Miles per gallon:</td>
    <td><input type="text" name="mpg" value=0></td>
    </tr><tr>
    <td>Cents per mile:</td>
    <td><input type="text" name="cpg" value=0></td>
    </tr><tr>
    <td colspan="2" style="text-align:right;"><input type="button"
    value="Calculate"
    onclick="fuelCalculator(this.form);"></td>
    </tr>
    </table>
    </form>


    > the old <input type=button" /> is slightly out dated as well. Remember


    The only real difference between a button element and an input element
    type button is that buttons can have content, inputs can't. The OP has
    not indicated any requirement for content, so the use of a button is not
    indicated.

    I don't think there is any intent to deprecate input type button so it
    is no more out of date than most other HTML elements.


    > with js all vars are objects, you need to hint to the engine what you
    > want it to do with them; hence parseFloat().


    It is a good suggestion to validate input, however parseInt & parseFloat
    are pretty useless for that. Their primary purpose seems to be to remove
    trailing non-digit characters (such as units) from strings and return
    numbers.

    e.g.
    parseInt('25mpg') returns '25' as type number
    parseInt('2mpg5') returns '2' as type number



    --
    Zif
    Zif, Jan 24, 2006
    #6
  7. Zif Guest

    Zif wrote:
    > wrote:

    [...]
    >> <SCRIPT LANGUAGE = "JavaScript">

    >
    > The language attribute is deprecated whereas the type attribute is
    > required.
    >
    > <SCRIPT type="javascript">


    Yeah, right...

    <SCRIPT type="text/javascript">

    [...]


    --
    Zif
    Zif, Jan 24, 2006
    #7
  8. Randy Webb Guest

    Zif said the following on 1/24/2006 1:10 AM:
    > wrote:
    >> Honestly , you code should be as follows:

    >
    > Honestly, don't.


    100% Agreed.


    >> var iPPG = document.getElementById("ppg").value ;
    >> var iMPG = document.getElementById("mpg").value ;
    >> document.getElementById("cpg").value = parseFloat(iPPG) /
    >> parseFloat(iMGP) ;


    > Don't allow auto-wrapping to wrap code, it will almost certainly
    > introduce errors.


    As will parseFloat in that instance. Unary + is more efficient at
    converting strings to Number than parseFloat is.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jan 24, 2006
    #8
  9. JRS: In article <>
    , dated Mon, 23 Jan 2006 20:07:26 remote, seen in
    news:comp.lang.javascript, posted :

    >the old <input type=button" /> is slightly out dated as well.


    Javascript in Web pages is executed on the customers' machines, not the
    author's. Therefore, traditional constructs should not be replaced by
    new-fangled ones until an adequate preponderance of user systems will
    understand them.




    If you find that, when you start a News reply, Google does not provide
    the previous article in quoted form, note what Keith Thompson wrote in
    comp.lang.c, message ID <> :-
    If you want to post a followup via groups.google.com, don't use
    the "Reply" link at the bottom of the article. Click on "show
    options" at the top of the article, then click on the "Reply" at
    the bottom of the article headers.

    Since that is what the experts in this newsgroup prefer to read, it will
    be to your advantage to comply. Read the FAQ.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Jan 25, 2006
    #9
  10. Randy Webb Guest

    Dr John Stockton said the following on 1/25/2006 12:30 PM:
    > JRS: In article <>
    > , dated Mon, 23 Jan 2006 20:07:26 remote, seen in
    > news:comp.lang.javascript, posted :
    >
    >> the old <input type=button" /> is slightly out dated as well.

    >
    > Javascript in Web pages is executed on the customers' machines, not the
    > author's. Therefore, traditional constructs should not be replaced by
    > new-fangled ones until an adequate preponderance of user systems will
    > understand them.


    <button> is a "new-fangled" construct? Surely you jest.

    A more appropriate statement would be along the lines of:

    "Do not constrain yourself to antiquated HTML habits based on 1 or 2
    peoples inability to update."

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jan 25, 2006
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Badass Scotsman
    Replies:
    1
    Views:
    364
    S. Justin Gengo
    Apr 24, 2006
  2. Replies:
    2
    Views:
    373
    Steven D'Aprano
    Mar 4, 2007
  3. Fredrik Lundh

    Re: Simple calculation error

    Fredrik Lundh, Jan 4, 2008, in forum: Python
    Replies:
    2
    Views:
    348
    Francois Liot
    Jan 4, 2008
  4. serkany
    Replies:
    6
    Views:
    1,141
    JohnDuq
    Apr 17, 2009
  5. Replies:
    10
    Views:
    179
    Hardono Arifanto
    Apr 4, 2007
Loading...

Share This Page