This code validates in JSHint. But clicking on the run time button does not generate an answer.
The Form:
<form id="form1"><table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td><a name="form1">Tank</a> capacity, cc's:</td>
<td><input class="display2" type="number" size="4" value="" name="tank"></td>
<td width="50"><a href="#" onclick="alert('How much fuel does your tank hold?')"><img src="qmark2.png" width="45px" height="40px"></a></td>
</tr>
<tr><td bgcolor="#eeeeee">Drive time, minutes:</td>
<td bgcolor="#eeeeee"><input class="display2" type="number" size="4" value="" name="driveMinutes"></td>
<td bgcolor="#eeeeee"><a href="#form1" onclick="alert('Take a test drive and time it. Put your minutes here and seconds in the next box.')"><img src="qmark2.png" width="45px" height="40px"></a></td>
</tr>
</tr>
<td bgcolor="#eeeeee">Drive time, seconds:</td>
<td bgcolor="#eeeeee"><input class="display2" type="number" size="4" value="0" name="driveSeconds"></td>
<td bgcolor="#eeeeee"> </td>
</tr>
<tr><td>Fuel remaining, cc's:</td>
<td><input class="display2" type="number" size="4" value="" name="consumed"></td>
<td><a href="#form1" onclick="alert('Enter the amount of fuel remaining after your test drive. Enter 0 if you ran til empty.')"><img src="qmark2.png" width="45px" height="40px"></a></td>
</tr>
<tr><td bgcolor="#eeeeee"><input id="runtime" name="runtime" class="buttPress3" type="button" value="Run time"></td>
<td bgcolor="#eeeeee"><input class="display2" size="4" type="number" value="" name="ans"></td>
<td bgcolor="#eeeeee"><a href="#form1" onclick="alert('This is how many minutes you will run per tank based on your test run.')"><img src="qmark2.png" width="45px" height="40px"></a></td>
</tr>
<tr><td colspan="3" bgcolor="#ffffff">
<p style="font-size:.8em"><em>If readout says, "NaN," please double-check your figures and fill every box.</em></p>
</td>
</tr>
</table></form>
If I put an alert in the Javascript immediately after “function formFuel(form) {”, then it fires when tapping on the runtime button.
The Javascript at bottom of page:
<script type=“text/javascript”>
function formFuel(form) {
// get the info
var a = form.elements.tank.value,
b = parseInt(form.elements.driveMinutes.value, 10),
c = parseInt(form.elements.driveSeconds.value, 10),
d = form.elements.consumed.value;
if (c === "") {c = 0;}
var used = a - d, // get the amount of fuel used
// convert min to secs
secs = b * "60";
// form checking
if (c >= "60") { alert("Please keep your seconds value under 1 minute.");
}
if (a <= "0") { alert("Please add the amount of fuel in your tank at the beginning of your test run.");
}
if (b === "" || c === "") { alert("Please enter the length of your test run.");
}
if (d === "") { alert("Please enter how much fuel remained after your test run. Put 0 if empty.");
}
var secstotal = secs + c, // add minutes and seconds to get total seconds
secsPerCC = secstotal / used, // divide the number of seconds into the used fuel amount (for secs per cc)
runtime = secsPerCC * a, // Get the amount of runtime per tankful of fuel
minutes = Math.floor(runtime / 60), // get the minute figure as a digit for the time readout
seconds = runtime % 60; // use modulus operator to get the remainder and convert into seconds figure for the time readout
seconds = parseInt(seconds, 10);
if (seconds === 0) {seconds = "00";}
var runtime2 = minutes + ":" + seconds; // concatenate everything into minutes and seconds
form.elements.ans.value = runtime2; // display "runtime2" value in the "ans" field
}
var runtime = document.getElementById('runtime');
runtime.onclick = function () {
var form = document.getElementById('form1');
formFuel(form);
};
</script>