javascript实现的简单计算出错，结果是NaN

pong

691117

发布于
2016-09-20

Sunny

5.3k155085

更新于
2016-09-20

新手请教，代码很简单，但结果是NaN，我不能调试出哪里出问题。
1、哪里出问题？
2、能告知如何调适最好了（我用chrome的自带调试）？
图片描述

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
  <title> 事件</title>   
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' id="act" value=' = ' /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />
   <script type="text/javascript">   
    //获取第一个输入框的值
    var txt1 =parseInt(document.getElementById("txt1").value);
  //获取第二个输入框的值
    var txt2 =parseInt(document.getElementById("txt2").value);
  //获取选择框的值
    var selected =document.getElementById("select").value;
  //获取通过下拉框来选择的值来改变加减乘除的运算法则
    var answer;
    switch(selected){
        case "+":
            answer=txt1 + txt2;
            break;
        case "-":
            answer=txt1 - txt2;
            break;
        case "*":
            answer=txt1*txt2;
            break;
        case "/":
            answer=txt1/txt2;
            break;
    }
    //绑定事件，设置结果输入框的值 
    var btn=document.getElementById("act");
    btn.addEventListener("click",function(e){
        document.getElementById("fruit").value=answer;
    },false)
  </script>   
 </body>
</html>

javascript

阅读 8.8k

10 个回答

xzavier

✓ 已被采纳

1.你的js代码在输入值之前就已经执行了，而这时候txt1和txt2取到的NaN。计算的answer也就是NaN。
把代码放进监听的click事件去就可以，也可以写个方法封装一下。

//绑定事件，设置结果输入框的值 
var btn=document.getElementById("act");
btn.addEventListener("click",function(e){
    //获取第一个输入框的值
    var txt1 =parseInt(document.getElementById("txt1").value,10);//十进制
    //获取第二个输入框的值
    var txt2 =parseInt(document.getElementById("txt2").value,10);//十进制
    //获取选择框的值
    var selected =document.getElementById("select").value;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    var answer;
    switch(selected){
        case "+":
            answer=txt1 + txt2;
            break;
        case "-":
            answer=txt1 - txt2;
            break;
        case "*":
            answer=txt1*txt2;
            break;
        case "/":
            answer=txt1/txt2;
            break;
    }
    document.getElementById("fruit").value=answer;
},false);

2.打开调试器，打断点，一步一步调试，查看获取的值是不是正确的。再对代码进行修改。
图片描述

LLLL

598156583

发布于
2016-09-20

执行到

//获取第一个输入框的值
    var txt1 =parseInt(document.getElementById("txt1").value);
  //获取第二个输入框的值
    var txt2 =parseInt(document.getElementById("txt2").value);

的时候，输入框里根本就没有值啊

佣才

1353

发布于
2016-09-20

你应该当按等于后才获取两个tex的值和里面的算法

dollor

2.6k149

发布于
2016-09-20

更新于
2016-09-20

你应该把计算过程放在响应函数里

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
  <title> 事件</title>   
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' id="act" value=' = ' /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />
   <script type="text/javascript">   
    //绑定事件，设置结果输入框的值 
    var btn=document.getElementById("act");
    btn.addEventListener("click",function(e){
        //获取第一个输入框的值
        var txt1 =parseInt(document.getElementById("txt1").value,10);//十进制
        //获取第二个输入框的值
        var txt2 =parseInt(document.getElementById("txt2").value,10);//十进制
        //获取选择框的值
        var selected =document.getElementById("select").value;
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        var answer;
        switch(selected){
            case "+":
                answer=txt1 + txt2;
                break;
            case "-":
                answer=txt1 - txt2;
                break;
            case "*":
                answer=txt1*txt2;
                break;
            case "/":
                answer=txt1/txt2;
                break;
        }
        document.getElementById("fruit").value=answer;
    },false)
  </script>   
 </body>
</html>

看有个大西瓜

45934563

发布于
2016-09-20

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
  <title> 事件</title>   
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' id="act" value=' = ' /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />
   <script type="text/javascript">   

    var btn=document.getElementById("act");

    btn.onclick = function(){
          //获取第一个输入框的值
          var txt1 =parseInt(document.getElementById("txt1").value);
        //获取第二个输入框的值
          var txt2 =parseInt(document.getElementById("txt2").value);
        //获取选择框的值
          var selected =document.getElementById("select").value;
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
          var answer;
          switch(selected){
              case "+":
                  answer=txt1 + txt2;
                  break;
              case "-":
                  answer=txt1 - txt2;
                  break;
              case "*":
                  answer=txt1*txt2;
                  break;
              case "/":
                  answer=txt1/txt2;
                  break;
          }

          document.getElementById("fruit").value=answer;
    }
  </script>   
 </body>
</html>

liguoyi

1.7k127

发布于
2016-09-20

主要原因就是没有理解js赋值点击事件前就进行了，而且只会进行一次初始化，简单把计算逻辑放到 function 封装一下就好，如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
  <title> 事件</title>   
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' id="act" value=' = ' /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />
   <script type="text/javascript">   
    function calc() {
        //获取第一个输入框的值
        var txt1 =parseInt(document.getElementById("txt1").value);
        //获取第二个输入框的值
        var txt2 =parseInt(document.getElementById("txt2").value);
        //获取选择框的值
        var selected =document.getElementById("select").value;
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        var answer;
        switch(selected){
            case "+":
                answer=txt1 + txt2;
                break;
            case "-":
                answer=txt1 - txt2;
                break;
            case "*":
                answer=txt1*txt2;
                break;
            case "/":
                answer=txt1/txt2;
                break;
        }
        document.getElementById("fruit").value=answer;
    }
    //绑定事件，设置结果输入框的值 
    var btn=document.getElementById("act");
    btn.addEventListener("click",calc,false)
  </script>   
 </body>
</html>

keifer

1103

发布于
2016-09-20

出现问题的地方是因为Javascript脚本在浏览器上是加载完成后立即运行，那么也就是说这段代码

//获取第一个输入框的值
 var txt1 =parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
 var txt2 =parseInt(document.getElementById("txt2").value);

是在页面渲染出来之后就已经运行了，而这时候你的输入框里面并没有值，所以txt1和txt2获取到的是空值。
正确的做法是将计算的方法包装成一个函数，然后在点击按钮的时候才去运行

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
  <title>事件</title>   
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' id="act" value=' = ' /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />
   <script type="text/javascript">
   function math() {
         //获取第一个输入框的值
        var txt1 =parseInt(document.getElementById("txt1").value);
        //获取第二个输入框的值
        var txt2 =parseInt(document.getElementById("txt2").value);
        //获取选择框的值
        var selected =document.getElementById("select").value;
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        var answer;
        switch(selected){
            case "+":
                answer=txt1 + txt2;
                break;
            case "-":
                answer=txt1 - txt2;
                break;
            case "*":
                answer=txt1*txt2;
                break;
            case "/":
                answer=txt1/txt2;
                break;
        }
        return answer;
   }
   
    //绑定事件，设置结果输入框的值 
    var btn=document.getElementById("act");
    btn.addEventListener("click",function(e){
        var answer = math();
        document.getElementById("fruit").value=answer;
    },false)
  </script>   
 </body>
</html>

小米Z

93510

发布于
2016-09-20

可以在js代码行中插入断点进行调试

debugger;

然后chrome F12，可调试。

某某宁

781716

发布于
2016-09-20

把计算部分的代码封装起来就行了

寻找答案

602

发布于
2016-09-20

取值应在click事件之后

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
  <title> 事件</title>   
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' id="act" value=' = ' /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />
   <script type="text/javascript">   
    //绑定事件，设置结果输入框的值 
    var btn=document.getElementById("act");
    btn.addEventListener("click",function(e){
        //获取第一个输入框的值
        var txt1 =parseInt(document.getElementById("txt1").value,10);//十进制
        //获取第二个输入框的值
        var txt2 =parseInt(document.getElementById("txt2").value,10);//十进制
        //获取选择框的值
        var selected =document.getElementById("select").value;
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        var answer;
        switch(selected){
            case "+":
                answer=txt1 + txt2;
                break;
            case "-":
                answer=txt1 - txt2;
                break;
            case "*":
                answer=txt1*txt2;
                break;
            case "/":
                answer=txt1/txt2;
                break;
        }
        document.getElementById("fruit").value=answer;
    },false);
  </script>   
 </body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

javascript实现的简单计算出错，结果是NaN

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？