<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>计算器</title> <script type="text/javascript"> var a = parseInt(document.getElementById("t1").value); var b = parseInt(document.getElementById("t2").value); function count(){ var ret; switch( document.getElementById("select").value){ case"+":ret=a+b;break; case"-":ret=a-b;break; case"*":ret=a*b;break; case"/":ret=a/b;break; } document.getElementById("t3").value=ret; } </script> </head> <body> <form> <input type="text" id="t1"> <select id="select"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="t2"> <input type="button" value="=" onclick="count()"> <input type="text" id="t3"> </form> </body> </html>
你把a和b的获取定义在<script type="text/js"></script>里面表示没加载页面之前就开始获取t1与t2的值,所以获取的结果肯定是空的,因为页面没加载完,你肯定还没输入这两个数字呢,你可以在你这个有错误的代码var a和var b 的后面分别加上alert(a);alert(b);即
var a = parseInt(document.getElementById("t1").value); alert(a);
var b = parseInt(document.getElementById("t2").value); alert(b);其弹出来的都是空值。调试下就可以知道了
所以只要把a和b的获取定义在函数里面就可以 其更改的结果为:
function count(){
var a = parseInt(document.getElementById("t1").value);
var b = parseInt(document.getElementById("t2").value);
var ret;
switch(document.getElementById("select").value){
case"+":ret=a+b;break;
case"-":ret=a-b;break;
case"*":ret=a*b;break;
case"/":ret=a/b;break;
}
document.getElementById("t3").value=ret;
}
看了一下其实你可以在t3的标签里加入onfocus="count()"事件,这样你直接点击最后一个文本框就可以得到答案,不需要非要按下等于按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script type="text/javascript">
function count(){
var a = parseInt(document.getElementById("t1").value);
var b = parseInt(document.getElementById("t2").value);
var ret;
switch(document.getElementById("select").value){
case"+":ret=a+b;break;
case"-":ret=a-b;break;
case"*":ret=a*b;break;
case"/":ret=a/b;break;
}
document.getElementById("t3").value=ret;
}
</script>
</head>
<body>
<form>
<input type="text" id="t1">
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="t2">
<input type="button" value="=" onclick="count()">
<input type="text" id="t3">
</form>
</body>
</html>
你可以参考下,希望我的解释能帮助到你。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script type="text/javascript">
function count(){
var a = parseInt(document.getElementById("t1").value);//写在函数里面,页面加载完,调用函数的时候才获取t1的值
var b = parseInt(document.getElementById("t2").value);//写在函数里面,页面加载完,调用函数的时候才获取t2的值
var ret;
switch(document.getElementById("select").value){
case"+":ret=a+b;break;
case"-":ret=a-b;break;
case"*":ret=a*b;break;
case"/":ret=a/b;break;
}
document.getElementById("t3").value=ret;
}
</script>
</head>
<body>
<form>
<input type="text" id="t1">
<select id="select">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="t2">
<input type="button" value="=" onclick="count()">
<input type="text" id="t3" onfocus="count()">//这里加个onfocus事件(个人建议)
</form>
</body>
</html>
<script type="text/javascript">
function count(){
var ret;
var a = parseInt(document.getElementById("t1").value);
var b = parseInt(document.getElementById("t2").value);
switch( document.getElementById("select").value){
case"+":ret=a+b;break;
case"-":ret=a-b;break;
case"*":ret=a*b;break;
case"/":ret=a/b;break;
}
document.getElementById("t3").value=ret;
}
</script>