表单按钮拒绝执行 javascript 除函数

Question

我正在尝试 SAMS 自学 JavaScript 21 天 ;

中的以下练习

"查看清单 7.1 并对其进行修改，以便不使用提示框，而是使用数字使用 XHTML 表单输入。"

清单7.1如下；

<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>

这是我的尝试，但我只是要放置 JS 脚本和表单片段；

<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>

和html形式

<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>

我的问题是按钮没有执行功能，我想知道为什么。

Answer 1

我已经修复了您的代码并添加了一些注释以提供更多解释！

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>

旁注：

 是一个 HTML 评论标签。
Javascript 多行注释，以正斜杠加星号 (/*) 开始，以星号加正斜杠 (*/) 结束。

在 script 标签内你写 JS 而不是 HTML，所以你会使用 (/**/) 来评论而不是 HTML 使用的（).

表单按钮拒绝执行 javascript 除函数

Form button refusing to execute javascript divide function

javascript

html

button

calculation

divide