js中获取文本框输入的数字，用alert显示的值却是undefined

时间：2023-01-13 14:37:23
我做了一个简易的计算器,在输入数字进行计算时始终输出为NaN
<html>
    <head>
        <title>j计算器</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0px;padding:0px}
            #back{background-color:yellow;font-size: 20px;width:800px;height: 500px;margin:0px auto;}
            .cal{text-align: center;}
            .cal button{width:100px;height:100px;}
        </style>
        <script type="text/javascript" language="javascript">
           /* var yy=document.getElementById(back);
            var x=yy.fnum.value;
            var y=yy.lnum.value;*/
         // var x=document.calculate.num1.value;
        var x=document.getElementByIdx("calculate").num1;
          var y=document.calculate.num2.value[0];
         //   var fn=document.calcul.finalnum.value;
           
            function c1(){
               var result=parseFloat(x)+parseFloat(y);
               
               alert(x);
              document.calculate.finalnum.value=result;
          //  yy.finalnum.valueOf(result);
            }
             function c2(){
               var result=parseFloat(x)-parseFloat(y);
               document.calculate.finalnum.value=result; 
            // document.getElementById(back).F        
             }
             function c3(){
               var result=parseFloat(x)*parseFloat(y);
               document.calculate.finalnum.value=result;
            }

</script>
    </head>
    <body>
        <div id="back">
            <form name="calculate" class="cal">
            第1个数:<input type="text" name="num1" value="0" id="only"><br>
            第2个数:<input type="text" name="num2" ><br>
            结果为:<input type="text" name="finalnum"><br>
            <input type="button" name='add' value='+' onClick="c1()">
            <input type="button" name='minus' value='-' onClick="c2()">
            <input type="button" name='cheng' value='*' onClick="c3()">
            <input type="button" name='jj' value='++'>
            <input type="button" name='jian' value='--'>
            <input type="button" name='division' value='/'>
            <input type="button" name='bai' value='%'>
        </form>
            </div>
    </body>
</html>

7 个解决方案

#1


<html>
    <head>
        <title>j计算器</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0px;padding:0px}
            #back{background-color:yellow;font-size: 20px;width:800px;height: 500px;margin:0px auto;}
            .cal{text-align: center;}
            .cal button{width:100px;height:100px;}
        </style>
        <script type="text/javascript" language="javascript">
            function c1(){
               var x=document.calculate.num1.value;
               var y=document.calculate.num2.value;
               var result=parseFloat(x)+parseFloat(y);
              document.calculate.finalnum.value=result;
            }
             function c2(){
               var x=document.calculate.num1.value;
               var y=document.calculate.num2.value;
               var result=parseFloat(x)-parseFloat(y);
               document.calculate.finalnum.value=result; 
             }
             function c3(){
               var x=document.calculate.num1.value;
               var y=document.calculate.num2.value;
               var result=parseFloat(x)*parseFloat(y);
               document.calculate.finalnum.value=result;
            }

</script>
    </head>
    <body>
        <div id="back">
            <form name="calculate" class="cal">
            第1个数:<input type="text" name="num1" value="0" id="only"><br>
            第2个数:<input type="text" name="num2" ><br>
            结果为:<input type="text" name="finalnum"><br>
            <input type="button" name='add' value='+' onClick="c1()">
            <input type="button" name='minus' value='-' onClick="c2()">
            <input type="button" name='cheng' value='*' onClick="c3()">
            <input type="button" name='jj' value='++'>
            <input type="button" name='jian' value='--'>
            <input type="button" name='division' value='/'>
            <input type="button" name='bai' value='%'>
        </form>
            </div>
    </body>
</html>

#2

有1个问题：为什么 var x=document.calculate.num1.value; var y=document.calculate.num2.value;放在函数里可以用，放在函数外函数里的result就不能读正确结果

      

#3

标签的获取需要放在标签定义之后，即先要生成元素之后才能通过document.get...得到它，否则得到的就是null,所以在这里要把script放在form之后，或者在script里将所有的内容包在以下方法中：
window.onload=function(){
  /*your code...*/
};
改方法就是在网页加载完毕之后再调用的

#4

引用 2 楼 qq_31987003 的回复:
有1个问题：为什么 var x=document.calculate.num1.value; var y=document.calculate.num2.value;放在函数里可以用，放在函数外函数里的result就不能读正确结果
     


放在函数外是在页面加载时就执行的。在执行时下面的html元素还没有加载完成，访问不到。
就算把script放在form之后，或者放到window.onload事件中也不行，那样x，y的值只是文本框初始的字符串，不是用户后来输入的值。

#5

 var x=document.getElementByIdx("calculate").num1;  这句Id后面X是什么东东？？？？

#6

引用 5 楼 buzhou111 的回复:
 var x=document.getElementByIdx("calculate").num1;  这句Id后面X是什么东东？？？？

打错了而已

#7

引用 3 楼 ph_csdn 的回复:
标签的获取需要放在标签定义之后，即先要生成元素之后才能通过document.get...得到它，否则得到的就是null,所以在这里要把script放在form之后，或者在script里将所有的内容包在以下方法中：
window.onload=function(){
  /*your code...*/
};
改方法就是在网页加载完毕之后再调用的

把script放在form之后，这种方法是不对的，楼下正解

#1


<html>
    <head>
        <title>j计算器</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0px;padding:0px}
            #back{background-color:yellow;font-size: 20px;width:800px;height: 500px;margin:0px auto;}
            .cal{text-align: center;}
            .cal button{width:100px;height:100px;}
        </style>
        <script type="text/javascript" language="javascript">
            function c1(){
               var x=document.calculate.num1.value;
               var y=document.calculate.num2.value;
               var result=parseFloat(x)+parseFloat(y);
              document.calculate.finalnum.value=result;
            }
             function c2(){
               var x=document.calculate.num1.value;
               var y=document.calculate.num2.value;
               var result=parseFloat(x)-parseFloat(y);
               document.calculate.finalnum.value=result; 
             }
             function c3(){
               var x=document.calculate.num1.value;
               var y=document.calculate.num2.value;
               var result=parseFloat(x)*parseFloat(y);
               document.calculate.finalnum.value=result;
            }

</script>
    </head>
    <body>
        <div id="back">
            <form name="calculate" class="cal">
            第1个数:<input type="text" name="num1" value="0" id="only"><br>
            第2个数:<input type="text" name="num2" ><br>
            结果为:<input type="text" name="finalnum"><br>
            <input type="button" name='add' value='+' onClick="c1()">
            <input type="button" name='minus' value='-' onClick="c2()">
            <input type="button" name='cheng' value='*' onClick="c3()">
            <input type="button" name='jj' value='++'>
            <input type="button" name='jian' value='--'>
            <input type="button" name='division' value='/'>
            <input type="button" name='bai' value='%'>
        </form>
            </div>
    </body>
</html>

#2

有1个问题：为什么 var x=document.calculate.num1.value; var y=document.calculate.num2.value;放在函数里可以用，放在函数外函数里的result就不能读正确结果

      

#3

标签的获取需要放在标签定义之后，即先要生成元素之后才能通过document.get...得到它，否则得到的就是null,所以在这里要把script放在form之后，或者在script里将所有的内容包在以下方法中：
window.onload=function(){
  /*your code...*/
};
改方法就是在网页加载完毕之后再调用的

#4

引用 2 楼 qq_31987003 的回复:
有1个问题：为什么 var x=document.calculate.num1.value; var y=document.calculate.num2.value;放在函数里可以用，放在函数外函数里的result就不能读正确结果
     


放在函数外是在页面加载时就执行的。在执行时下面的html元素还没有加载完成，访问不到。
就算把script放在form之后，或者放到window.onload事件中也不行，那样x，y的值只是文本框初始的字符串，不是用户后来输入的值。

#5

 var x=document.getElementByIdx("calculate").num1;  这句Id后面X是什么东东？？？？

#6

引用 5 楼 buzhou111 的回复:
 var x=document.getElementByIdx("calculate").num1;  这句Id后面X是什么东东？？？？

打错了而已

#7

引用 3 楼 ph_csdn 的回复:
标签的获取需要放在标签定义之后，即先要生成元素之后才能通过document.get...得到它，否则得到的就是null,所以在这里要把script放在form之后，或者在script里将所有的内容包在以下方法中：
window.onload=function(){
  /*your code...*/
};
改方法就是在网页加载完毕之后再调用的

把script放在form之后，这种方法是不对的，楼下正解
标签：

相关文章