求帮忙看一下代码，实在不知道为什么运行不对-慕课网

求帮忙看一下代码，实在不知道为什么运行不对

来源：6-11 编程练习

素本往后

2016-12-01 12:49

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

写回答关注

3回答

手机用户3146674384

2016-12-01 14:37:41

已采纳

你把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>
你可以参考下，希望我的解释能帮助到你。

4 1

素本往后回复手机用户31...

就是按照你说的，在我有错误的代码var a和var b 的后面分别加上alert(a);alert(b)；

2016-12-01 20:35:52

共 4 条回复 >
手机用户3146674384

2016-12-01 14:39:58

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

0 0
Toskyline

2016-12-01 14:06:58

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

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468194 学习 · 21891 问题

相似问题

回答 4

回答 5

回答 2

回答 1

回答 4