先看错误的代码演示:
<!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>
姓  名:<input type="text" name="username" id="username"/><br/>
密  码:<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值,需进一步探究。