为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

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

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


素本往后

2016-12-01

源自：JavaScript进阶篇  6-11

关注问题 我要回答
932
操作
收起

正在回答

3 回答

手机用户3146674384 回答被采纳 +3 积分
2016-12-01

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

你可以参考下，希望我的解释能帮助到你。

1 回复 有任何疑惑可以回复我~
收起回答
#1

素本往后 提问者

谢谢！看来我对代码的执行顺序理解得还很不好。我发现当var a,b在函数外面时，alert()也不执行了，不会弹出，这是什么原因呢？按理说，没有获取到会弹出null?
2016-12-01 回复 有任何疑惑可以回复我~
#2

素本往后 提问者 回复 手机用户3146674384

var a = parseInt(document.getElementById("t1").value); alert(a); var b = parseInt(document.getElementById("t2").value); alert(b); function count(){
2016-12-01 回复 有任何疑惑可以回复我~
#3

素本往后 提问者 回复 手机用户3146674384

就是按照你说的，在我有错误的代码var a和var b 的后面分别加上alert(a);alert(b)；
2016-12-01 回复 有任何疑惑可以回复我~
查看1条回复
手机用户3146674384
2016-12-01

<!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 回复 有任何疑惑可以回复我~
收起回答
Toskyline
2016-12-01

<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/150
提交
取消
JavaScript进阶篇
  • 参与学习       468194    人
  • 解答问题       21891    个

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

进入课程

本课相似问答

4 回答实在不知道这错哪了，求帮忙

5 回答为什么运行不了，求求哪位大佬帮忙看一下​

2 回答代码运行不出来 求大神帮忙看看

1 回答帮我看看 不知道为什么不行

4 回答帮忙看下，为什么代码运行不出来？谢谢啦
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信