javascript代码无效

时间:2013-12-12 22:46:48

标签: javascript

此代码无效:

<!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”。 哪种方式最好解决这类问题?

2 个答案:

答案 0 :(得分:1)

您正试图在文档完全加载之前运行引用元素的javascript。

这样做:

HTML

<body onload='onLoad()'></body>

JS

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