Join 132,366 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,296 people online right now. Registration is fast and FREE... Join Now!
I'm having one heck of a time trying to get this seemingly basic script to work. *User enters beginning miles, ending miles and gallons used to calculate mpg. These elements use onchange events to invoke the calcMPG function.
I haven't even attempted a nested if stmt. within the else clause to verify value of gallons entered >0, if value is not >0, the stmt. within the if stmt. shouldn't execute.
Can anyon help??
CODE
<!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> <title>Calculate MPG</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ function calcMPG() { var startMiles = parseInt(document.mpgform.startingMileage.value); var endMiles = parseInt(document.mpgform.endingMileage.value); var gallons = parseInt(document.mpgform.gallonsUsed.value); var mpg = ((mpgform.endingMileage - mpgform.startingMileage)/mpgform.gallonsUsed); }
if (isNaN(startingMileage.value) && isNaN(endingMileage.value) && isNaN(gallonsUsed.value)){ window.alert("You must enter a number"); } else{ document.mpgform.milesPerGallon.value = mpg; }
Your if statement and such should be IN your function and not outside it. Plus you had some variable names that were not defined. Make sure you are using the correct variables that you had setup in the function. Here is what it could look like...
jscript
<script type="text/javascript"> /* <![CDATA[ */ function calcMPG() {
var startMiles = parseInt(document.mpgform.startingMileage.value); var endMiles = parseInt(document.mpgform.endingMileage.value); var gallons = parseInt(document.mpgform.gallonsUsed.value);
// Check if startmiles, endmiles and gallons are all greater than zero if ((startMiles > 0) && (endMiles > 0) && (gallons > 0)) { // Calculate mpg (used absolute value in case endMiles is less than startMiles... otherwise you can check and prevent if endmiles is less than start miles) var mpg = (Math.abs(endMiles - startMiles)/gallons); document.mpgform.milesPerGallon.value = mpg; } }
/* ]]> */ </script>
Keep in mind that the onchange event will fire when you enter your value and SWITCH to another field. If you are wanting to calculate just by typing, you will need to look into the onkeypress, onkeydown, and onkeyup events.
Enjoy!
"At DIC we be mileage calculating code ninjas....we all have miles to go to becoming programming grand masters of the universe!"
Thanks so much for your quick reply. One problem though, I need to use an if...else stmt. using isNaN for first three input boxes, which I did in my original code, but then to prevent division by zero with gallons input box only, I need to nest an if stmt within the else clause to insure value >0.
well then, you got some work to do. My code provides half of what you need. I have the if statement for checking if they are greater than zero, you can put your isNaN tests in there as well as tack on the else statement.
You do have to do a little work yourself you know.
Well I've tried to nest the if in the if...else and now I'm getting (3) Errors: Object expected on lines 33,36,39 (lines that begin with label???) Any suggestions?
CODE
<!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> <title>Calculate Gas Mileage</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> /* <![CDATA[ */ function calcMPG() { var startMiles = parseInt(document.mpgform.startingMileage.value); var endMiles = parseInt(document.mpgform.endingMileage.value); var gallons = parseInt(document.mpgform.gallonsUsed.value);
// use isNAN fx within compound conditional stmt. to determine whether input boxes contain numbers if (isNaN(startingMileage) && isNaN(endingMileage) && isNaN(gallonsUsed)){ window.alert("You must enter a number");
// use nested if stmt. to verify gallons input value is >0 if (gallons >0){ var mpg=((endMiles - startMiles)/gallons); } else{ document.mpgform.milesPerGallon.value = document.mpgform.milesPerGallon.value; } }
Remember if they are not a number (that is isNaN returns true) you DON'T want to be doing the calculation. Your if statement is saying that if all the elements are not numbers then do your calculation. Also the line document.mpgform.milesPerGallon.value = document.mpgform.milesPerGallon.value; is doing nothing since you are just taking the value and give it back to itself.
Don't try and rush this, read through the logic and see if it makes sense.
Well, I've tried changing my if/if/else stmts., which seems to flow better, but now the object error is at lines 29,31,33, which begin form name,input,input.
I'm not sure where to go from here??
CODE
<script type="text/javascript"> /* <![CDATA[ */ function calcMPG() { var startMiles = parseInt(document.mpgform.startingMileage.value); var endMiles = parseInt(document.mpgform.endingMileage.value); var gallons = parseInt(document.mpgform.gallonsUsed.value); var mpg = ((endMiles - startMiles)/gallons);
// use isNAN fx within compound conditional stmt. to determine whether input boxes contain numbers if (isNaN(startMiles) && isNaN(endMiles) && isNaN(gallons)){ if (gallons <0) window.alert("You must enter a number"); document.mpgform.milesPerGallon.value = document.mpgform.milesPerGallon.value; else document.mpgform.milesPerGallon.value = mpg; } /* ]]> */ </script> </head> <body> <form name="mpgform" action=""> <label>Starting mileage:</label> <input type="text" name="startingMileage" value="0" onchange="calcMPG();"><br /> <label>Ending mileage:</label> <input type="text" name="endingMileage" value="0" onchange="calcMPG();"><br /> <label>Gallons used:</label> <input type="text" name="gallonsUsed" value="0" onchange="calcMPG();"><br /> <label>Miles per gallon:</label> <input type="text" name="milesPerGallon" value="0";><br /> </form>
You can't do this... var mpg = ((endMiles - startMiles)/gallons); BEFORE you test the values of the variables. You cannot do calculations before you have tested endMiles, startMiles, gallons to see if they are valid. This part will be in the if statement for if the values are valid.
I've moved the calculation, which makes sense - thank you. But, I just don't understand the relentless "object expected errors" beginning at the form line when inputing numbers. What are they referring to? I've checked for typos. Any suggestions?
CODE
function calcMPG() { var startMiles = parseInt(document.mpgform.startingMileage.value); var endMiles = parseInt(document.mpgform.endingMileage.value); var gallons = parseInt(document.mpgform.gallonsUsed.value); // use isNAN fx within compound conditional stmt. to determine whether input boxes contain numbers if ((isNaN(startMiles) && isNaN(endiMles) && isNaN(gallons))){ if (gallons <0) alert("You must enter a number"); else var mpg = ((endMiles - startMiles)/gallons); document.mpgform.milesPerGallon.value = mpg; } /* ]]> */ </script> </head> <body> <form name="mpgform" action=""> <p><label for="startingMileage">Starting mileage:</label></p><input type="text"
This post has been edited by raeNet: 30 Sep, 2008 - 10:20 AM
But, now I'm back to an unresponsive input screen. I tried tracing errors with "window.alert() Method", but all checked out. I'm open for suggestions, if anyone has any... thx.
function calcMPG() { var startMiles = parseInt(document.mpgform.startingMileage.value); var endMiles = parseInt(document.mpgform.endingMileage.value); var gallons = parseInt(document.mpgform.gallonsUsed.value); // use isNAN fx within compound conditional stmt. to determine whether input boxes contain numbers
if (!(isNaN(startMiles) && isNaN(endMiles) && isNaN(gallons))){ if (gallons==0){ alert("You must enter a number"); } else{ var mpg = ((endMiles - startMiles)/gallons); document.mpgform.milesPerGallon.value = mpg; } } }
30 Sep, 2008 - 05:51 AM
| 