慕课网

源自：2-11 编程练习

为什么先把两个变量定义好其结果会变成NAN呢?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input { width: 60px; }
        div { margin: 10px 0 }
    </style>
    <script type="text/javascript">
        window.onload = function () {

            // 获取元素
            var num1 = document.getElementById('num1');
            var num2 = document.getElementById('num2');
            var ret = document.getElementById('ret');
            var btns = document.getElementsByTagName('button');
    

            //为按钮添加点击事件，计算结果
            var x = parseInt(num1.value);
            var y = parseInt(num2.value);
            
            btns[0].onclick = function(){
                ret.innerHTML =(x+y);
            }
            btns[1].onclick = function(){
                ret.innerHTML =(x-y);
            }
            btns[2].onclick = function(){
                ret.innerHTML =(x*y);
            }
            btns[3].onclick = function(){
                ret.innerHTML =(x/y);
            }
           
            
            
            
            
        }
    </script>
</head>
<body>
<input id="num1" type="text"  />
<input id="num2" type="text" />
<div>结果：<span id="ret"></span></div>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
</body>
</html>

提问者：即将淡去的记忆 2014-08-24 15:40

个回答

San丶月

2016-12-21 18:00:26

你那样写会得到一个空值，所以是NAN

0
San丶月

2016-12-21 17:59:01

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input { width: 60px; }
        div { margin: 10px 0 }
    </style>

</head>
<body>
<input id="num1" type="text" value=""/>
<input id="num2" type="text" value=""/>
<div>结果：<span id="ret"></span></div>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<script type="text/javascript">
        window.onload = function () {

            // 获取元素
            var num1 = document.getElementById('num1');
            var num2 = document.getElementById('num2');
            var ret = document.getElementById('ret');
            var btns = document.getElementsByTagName('button');
            var p = parseInt;


            //为按钮添加点击事件，计算结果

            for(var i=0;i<btns.length;i++){
                btns[i].onclick = function(){
                    var p1 = p(num1.value);
                    var p2 = p(num2.value);
                        btns[0].onclick = function(){
                            ret.innerHTML = p1 + p2;
                        }
                         btns[1].onclick = function(){
                            ret.innerHTML = p1 - p2;
                        }
                        btns[2].onclick = function(){
                            ret.innerHTML = p1 * p2;
                        }
                         btns[3].onclick = function(){
                            ret.innerHTML = p1 / p2;
                        }
                 }
            }




       }
    </script>

</body>
</html>

0
慕后端9290756

2015-11-28 19:41:10

你刚加载的时候输入框里面没有内容，你输入内容之后，变量中还是以前的空内容，没有触发更新为你输入的新值，你把获取输入值放到onclick时间里面就好了

0