其他分享
首页 > 其他分享> > window.onload()方法中代码顺序

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

作者：互联网

先看错误的代码演示：

<!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]);
                }
            }
            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属性获取并弹出密码输入框的值" onclick="fn2()"/>
    <input type="button" value="通过标签名称获取并弹出所有input元素的value值" id="nameButton"/>
</body>
</html>

在这里插入图片描述

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

标签：onload,顺序,emsp,window,nameButton,input,document
来源： https://blog.csdn.net/weixin_45190226/article/details/121201894