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

qq_31987003 2016-04-23 10:33:31

我做了一个简易的计算器,在输入数字进行计算时始终输出为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>

...全文

1722 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_31987003 2016-04-24

打赏
举报

引用 3 楼 ph_csdn 的回复:

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

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

qq_31987003 2016-04-24

打赏
举报

引用 5 楼 buzhou111 的回复:

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

打错了而已

buzhou111 2016-04-24

打赏
举报

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

天际的海浪 2016-04-24

打赏
举报

引用 2 楼 qq_31987003 的回复:

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

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

ph_csdn 2016-04-24

打赏
举报

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

qq_31987003 2016-04-24

打赏
举报

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

天际的海浪 2016-04-23

打赏
举报


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