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

pong
  • 69

新手请教,代码很简单,但结果是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>
回复
阅读 6.7k
10 个回答
xzavier
  • 7.1k
✓ 已被采纳

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

执行到

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

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

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

dollor
  • 2.1k

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

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

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

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

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

debugger;

然后chrome F12,可调试。

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

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