这个js小程序为什么会出现NaN?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function() {

            var oTxt1 = document.getElementById("txt1");

            var oTxt2 = document.getElementById("txt2");

            var oBtn = document.getElementById("btn1");



            var n1 = parseFloat(oTxt1.value);

            var n2 = parseFloat(oTxt2.value);

            oBtn.onclick = function() {

                alert(n1+n2);

            };

        };

    </script>

</head>

<body>

<input type="text" id="txt1" >

<input type="text" id="txt2" >

<input type="button" id="btn1" value="=">

</body>

</html>

小弟最近在自学js,今天遇到个问题有点搞不懂,希望哪位大神帮忙看看

  var n1 = parseFloat(oTxt1.value);

  var n2 = parseFloat(oTxt2.value);

上面两个变量如果定义在 oBtn.onclick = function()之外会弹出NaN,如果在里面就不会,拜谢!

图片描述

阅读 2.5k
1 个回答

执行时机的问题,你在使用

oBtn.onclick = function() {
                alert(n1+n2);
            };

实际上n1和n2的赋值语句的执行时机是window.onload,那个时候input里面还没有值,所以是NaN,

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题