此代码无效:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.getElementByID("button").addEventListener('click', outInfo, false);
function outInfo () {
var user = document.getElementById("userName").value;
alert(user);
}
</script>
</head>
<body>
<p>User Name:
<input id="userName" type="text"/>
<input id="button" type="button" value="Click Me" />
</p>
</body>
</html>
此代码正常运行:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
<script>
function output() {
var i = document.getElementById("input");
window.alert(i.value);
}
</script>
</head>
<body>
<p>User Name:
<input type="text" name="username" id="input" size="30"/>
<input type="button" id="button" value="Start" onclick="output()" />
</p>
</body>
</html>
第一个出了什么问题?我想问题是函数“outInfo”。 哪种方式最好解决这类问题?
答案 0 :(得分:1)
您正试图在文档完全加载之前运行引用元素的javascript。
这样做:
<body onload='onLoad()'></body>
function onLoad() {
// ... Now manipulate my DOM
document.getElementById("button").addEventListener('click', outInfo, false);
}
答案 1 :(得分:0)
当您尝试将事件绑定到该元素时,该元素尚不存在。
您必须在创建元素后运行代码,方法是将代码放在元素后面的某处:
<input type="button" id="button" value="Start" onclick="output()" />
<script>
document.getElementById("button").addEventListener('click', outInfo, false);
</script>
或者使用在页面完全加载后发生的load
事件:
document.onload = function(){
document.getElementById("button").addEventListener('click', outInfo, false);
};
另请注意,它是getElementById
,而不是getElementByID
。