在线香蕉精品视频久草,伊人亚洲日韩欧美一区,久草青春草含羞草

                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1150

操作

收起

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>