注册表单及其计算器

重置是在表单，通过<input type="reset" id="concel" value="取消" />，这样能够很方便的重置，注意点是需要在表中，如果没有在表中，是没有任何作用的。

还有在js的函数中，需要注意刚开始变量的作用范围，函数内的函数只是限于这个范围，调用的这个函数，也只是在这个狭窄的方位内。

如：（一）

function Add()
{
   var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;
   var answer = parseInt(num1) +parseInt(num2);
   document.getElementById("result").value = answer;
}

（二）

var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;

function Add()
{
var answer = parseInt(num1) +parseInt(num2);
document.getElementById("result").value = answer;
}

这样子的方法一和方法二得出的结果是不一样的，第一个以后会有明确的结果，而第二种，会出现NAN的情况。

全部页面的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<script type="text/javascript">
function Add()
{
   var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;
   var answer = parseInt(num1) +parseInt(num2);
   document.getElementById("result").value = answer;
}

function Induce()
{
   var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;
   var answer = parseInt(num1) - parseInt(num2);
   document.getElementById("result").value = answer;
}

function Multiple()
{
   var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;
   var answer = parseInt(num1) * parseInt(num2);
   document.getElementById("result").value = answer;
}

function Divide()
{
   var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;
   var answer = parseInt(num1) / parseInt(num2);
   document.getElementById("result").value = answer;
}
</script>

</head>

<body>
请输入一个数：
<input type="text" id="number1"/>
<br/>
请输入二个数：
<input type="text" id="number2"/>
<br/>

<label><input type="button" value="+" name="btnAdd" onclick="Add()"/></label>
<label><input type="button" value="-" name="btnInduce" onclick="Induce()"/></label>
<label><input type="button" value="*" name="btnMultiple" onclick="Multiple()"/></label>
<label><input type="button" value="/" name="btnDivide" onclick="Divide()"/></label>

<br/>
结果：
<input type="text" id="result"/>
</body>
</html>