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 (<!-- -->).