Simple Calculation in Form - 3 textboxes - 1 function

R

rdavis7408

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

RobG

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.
Click to expand...

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">
Click to expand...

The language attribute is deprecated, type is required.

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

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>
Click to expand...


Typo?

</script>

[...]
 
L

Lee

(e-mail address removed) said:
function fuelCalculator() {
var costpergallon;
costpergallon= document.form1.ppg.value / document.form1.mpg.value;
document.form1.cpg.value = costpergallon;
document.write(costpergallon);
Click to expand...

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


</ script>
Click to expand...

There's your real problem. Get rid of the space before "script".
 
M

McKirahan

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>
Click to expand...

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
 
J

jgwyman

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().
 
Z

Zif

Honestly , you code should be as follows:
Click to expand...

Honestly, don't.

<HTML>

<HEAD>

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

<SCRIPT LANGUAGE = "JavaScript">
Click to expand...

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

function fuelCalculator() {
var iPPG = document.getElementById("ppg").value ;
Click to expand...

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) ;
Click to expand...

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>
Click to expand...

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>
Click to expand...

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
Click to expand...

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>
the old <input type=button" /> is slightly out dated as well. Remember
Click to expand...

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().
Click to expand...

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
 
Z

Zif

Zif said:
(e-mail address removed) wrote: [...]
<SCRIPT LANGUAGE = "JavaScript">
Click to expand...

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

<SCRIPT type="javascript">
Click to expand...

Yeah, right...

<SCRIPT type="text/javascript">

[...]
 
R

Randy Webb

Zif said the following on 1/24/2006 1:10 AM:
Honestly, don't.
Click to expand...

100% Agreed.

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

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

Dr John Stockton

JRS: In article <[email protected]>
, dated Mon, 23 Jan 2006 20:07:26 remote, seen in
news:comp.lang.javascript, (e-mail address removed) posted :
the old <input type=button" /> is slightly out dated as well.
Click to expand...

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 <[email protected]> :-
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.
 
R

Randy Webb

Dr John Stockton said the following on 1/25/2006 12:30 PM:
JRS: In article <[email protected]>
, dated Mon, 23 Jan 2006 20:07:26 remote, seen in
news:comp.lang.javascript, (e-mail address removed) posted :


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.
Click to expand...

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help with rounding on a calculation 14
Registration Form 7
Switch() Statement Not Working 17
action_page.php form 2
Registration form 13
How to store data from a sign up form on a website into an sql databse 1
I dont get this. Please help me!! 2
How do I get the if statement correct in the lines that has it in the program? 2

Members online

Total: 35 (members: 2, guests: 33)
Robots: 296

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,063
Latest member
StormyShuf

Latest Threads

Top