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

                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /用JS实现购物车特效

为什么先把两个变量定义好其结果会变成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

源自：用JS实现购物车特效 2-11

关注问题我要回答

1099

操作

收起

3 回答

San丶月
2016-12-21

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

0 回复有任何疑惑可以回复我~

收起回答

San丶月
2016-12-21

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