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.
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:
<!-- --> is an HTML comment tag./*) and end with an asterisk followed by a forward slash (*/).Inside script tag you write JS not HTML,So you would use (/**/) for commenting not one used by HTML (<!-- -->).