Member Avatar for clueless101

Can anyone help pinpoint why my script won't work? Objective: user enters starting & ending miles along with gallons used to calculate mpg. Onchange events for first 3 input boxes call the calcMPG function.
Thx in advance!

<!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);
	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;
}

/* ]]> */
</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>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 98 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by clueless101
Member Avatar for essential

Here you have it!
I've done a lite modification in your 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[ */
var validValue = /^[0-9]{1,4}$/;
function calcMPG() 
{ var startMiles = document.mpgform.startingMileage.value * 1; 
  var endMiles = document.mpgform.endingMileage.value * 1; 
  var gallons = document.mpgform.gallonsUsed.value * 1; 

for ( var x = 0; x <= 2; x++ ) 
{ if ( !validValue.test(document.mpgform.elements[x].value)) { alert('\nYou must enter a number!'); return false; } 
else { document.mpgform.milesPerGallon.value = (( endMiles - startMiles ) / gallons ); 
  } 
 } return true;
}
/* ]]> */ 
</script> 
</head> 
<body> 
<form name="mpgform" action="#" onsubmit="return false;"> 
<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> 
</body> 
</html>
Member Avatar for clueless101

Thanks Essential, you've helped a lot!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.