Javascript form is not working. Can you check this code for me?

[StevenHu]

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">&nbsp;</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>

[paul_wilkins]

I suspect that the problem is that you're trying to apply a value such as "3:46" to a field in the form that's expecting a number instead.

<input class="display2" size="4" type="number" value="" name="ans">

[StevenHu]

I changed it to text and it still won't display anything. What's odd is that If I strip it down to:

            function formBatt(form) {  
            "use strict";
                // get the info
                var a = form.elements.batt.value;
runtime2 = a;               
                form.elements.ansE.value = runtime2; // display "runtime2" value in the "ansE" field
            }

... it won't display "a" either, which is the first input box.
Something is fundamentally wrong.

[StevenHu]

It is now working! Thank you, Paul!