javascript实现的简单计算出错，结果是NaN-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

巴扎黑 2017-04-11 12:52:54

[JavaScript讨论组]

578

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



 
 
   事件

巴扎黑

全部回复(10)

高洛峰2017-04-11 12:54:54 10楼

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.打开调试器，打断点，一步一步调试，查看获取的值是不是正确的。再对代码进行修改。

赞 +0

添加回复

大家讲道理2017-04-11 12:54:54 9楼

执行到

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

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

赞 +0

添加回复

怪我咯2017-04-11 12:54:54 8楼

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

赞 +0

添加回复

伊谢尔伦2017-04-11 12:54:54 7楼

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

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

赞 +0

添加回复

高洛峰2017-04-11 12:54:54 6楼

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

赞 +0

添加回复

ringa_lee2017-04-11 12:54:54 5楼

主要原因就是没有理解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>

赞 +0

添加回复

天蓬老师2017-04-11 12:54:54 4楼

出现问题的地方是因为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>

赞 +0

添加回复

PHP中文网2017-04-11 12:54:54 3楼

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

debugger;

然后chrome F12，可调试。

赞 +0

添加回复

PHP中文网2017-04-11 12:54:54 2楼

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

赞 +0

添加回复

巴扎黑2017-04-11 12:54:54 1楼

取值应在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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>