javascripthtmlbuttoncalculationdivide

Form button refusing to execute javascript divide function


I am trying to attempt the following exercise from SAMS Teach Yourself Learn JavaScript in 21 Days;

"Look at Listing 7.1 and adapt it so that instead of using prompt boxes, the numbers are entered using an XHTML form."

Listing 7.1 is as follows;

<html>
<head>
<title>Precision of numbers</title>
<script type="text/javascript" language="javascript">
<!--
function Calculate(){
var n = 10.0 / 3.0;
document.write("10.0 divided by 3.0 is " + n); 
}
-->
</script>
</head>
<body onload="Calculate()">
</body>
</html>

Here is my attempt, but I am just going to put the JS script and form snippet;

<script type="text/javascript" language="javascript">
<!--
function SetFocus(){
document.Precision.FirstInput.focus();
}
function Calculate(){
var num1 = parseInt(document.getElementById('FirstInput').value);
var num2 = parseInt(document.getElementById('SecondInput').value); 
if (isNaN(num1) || isNaN(num2){
alert("You made an invalid entry. Please start again.");
document.SimpleForm.reset();
SetFocus();
}
else{
var result document.getElementById('result').value = num1 / num2;
}
}
-->
</script>

And the html form

<form name="Precision">
<p>
<strong>Enter first number:</strong>
<input type="text" name="FirstInput" id="FirstInput" />
</p>
<p>
<strong>Enter second number:</strong>
<input type="text" name="SecondInput" id="SecondInput" />
</p>
<p>
<strong>The answer is:</strong>
<input type="text" name="result" id="result" />
</p>
<p>
<button onclick="Calculate()">Click here to calculate</button>
</p>
</form>

My problem is the button is not executing the function and I would like to know why.


Solution

  • I've fixed your code and added some comments for more explanation!

    function SetFocus() {
        document.Precision.FirstInput.focus();
    }
    function Calculate() {
        var num1 = parseInt(document.getElementById("FirstInput").value);
        var num2 = parseInt(document.getElementById("SecondInput").value);
        if (isNaN(num1) || isNaN(num2)) {
        // add closed parenthesis
        alert("You made an invalid entry. Please start again.");
        document.Precision.reset(); // target Precision form not SimpleForm!?
        SetFocus();
        } else {
        document.getElementById("result").value = num1 / num2;
        }
    }
    <body onload="SetFocus()">
    <!-- when the page load set focus to first input -->
    <form name="Precision">
        <p>
        <strong>Enter first number:</strong>
        <input type="text" name="FirstInput" id="FirstInput" />
        </p>
        <p>
        <strong>Enter second number:</strong>
        <input type="text" name="SecondInput" id="SecondInput" />
        </p>
        <p>
        <strong>The answer is:</strong>
        <input type="text" name="result" id="result" />
        </p>
        <p>
        <button onclick="Calculate()" type="button">
            <!-- add type="button" to prevent form a page from reload -->
            Click here to calculate
        </button>
        </p>
    </form>
    </body>

    Side Notes:

    Inside script tag you write JS not HTML,So you would use (/**/) for commenting not one used by HTML (<!-- -->).