window.onload()方法中代码顺序

最新推荐文章于 2022-09-05 20:24:43 发布

入门有点晚

最新推荐文章于 2022-09-05 20:24:43 发布

阅读量764

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45190226/article/details/121201894

版权

本文探讨了JavaScript中window.onload方法内代码顺序的错误示例，指出错误的顺序导致循环内容在按钮被点击前执行，而预期的弹出框并未显示。纠正的方法是将获取按钮元素的代码放在fn3()函数之前，确保正确的执行流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看错误的代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过document获取数据or赋值</title>
    <style type="text/css">
        input{margin: 10px}
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function fn3() {
                var inputElements = document.getElementsByTagName("input");
                for(i=0;i<inputElements.length;i++){
                    alert(inputElements[i].value);
                }
            }
            var nameButton = document.getElementById("nameButton");
            nameButton.onclick = fn3;
        }
    </script>
</head>
<body>
姓&emsp;&emsp;名：<input type="text" name="username" id="username"/><br/>
密&emsp;&emsp;码：<input type="password" name="password"/><br/>
确认密码：<input type="password" name="password_confirm"/>
<hr/>
<input type="button" value="点击此处获取对应id对话框的属性值" id="button"/>
<input type="button" value="通过name属性获取并弹出密码输入框的值"/>
<input type="button" value="通过标签名称获取并弹出所有input元素的value值" id="nameButton"/>
</body>
</html>

运行此代码后直接就执行循环内容，，且没有如实的弹出value值。
之所以会没有点击按钮就执行弹出框，是因为window.onload()方法中代码顺序不正确。

注意：按钮通过onclick关键字绑定函数的代码如下

nameButton.onclick = fn3;

而不是

nameButton.onclick = fn3();

正确的代码顺序：

<script type="text/javascript">
        window.onload = function () {
            var nameButton = document.getElementById("nameButton");
            function fn3() {
                var inputElements = document.getElementsByTagName("input");
                for(i=0;i<inputElements.length;i++){
                    alert(inputElements[i].value);
                }
            }
            nameButton.onclick = fn3;
        }
</script>

具体操作：将获取“按钮”元素的代码

var nameButton = document.getElementById("nameButton");

放到fn3()函数前面。