Question

我不确定为什么这不起作用......我会先发布不起作用的内容，然后我会发布它下面的工作内容：<\ n \ n

/ p>

这没有用：

<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('theButton').addEventListener("click", function() {
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
});
</script>
</head>
<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" id="theButton" value="Change link">

</body>
</html>

这确实有效：

<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('myAnchor').innerHTML="<label for=\"Name\">What is your name?</label><input type=\"text\" id=\"Name\"/>";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html>

我尝试了对innerHTML的一点调整： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml

Answer 1

主要问题是脚本是在myAncor对象之前加载的。因此，您无法使用document.getElementById函数获取它。你应该在加载页面DOM对象之后调用这个函数。

Answer 2

如果您将脚本附加到head中，在html之前，当您尝试添加事件侦听器时，html仍然不存在。所以你需要将它包装在onload中：

window.onload=function(){
 //your code
}

addEventListener不起作用

2 个答案: