Question

在下面的代码中，我只想按标签名称匹配元素的数量，但它返回0并在页面加载时发出警报（不是按照我想要的点击）。一个小时内找不到任何错误

<!DOCTYPE HTML>
<HTML>
<head>

<script language="javascript">

    document.getElementById("all").onclick = alert( document.getElementsByTagName("a").length);

</script>

</head>
<body>


<div id="all" class="a">Click</div>
<div class="a"></div>
<div class="a"></div> 

</body>
</HTML>

我是JavaScript的新手

Answer 1

有几个问题。第一个是@Ian在他对你的问题的评论中指出的，第二个是你在代码中调用getElementsByTagName("a")时没有任何<a>标签。您需要拨打getElementsByClassName("a")。

document.getElementById("all").onclick = function() {
    alert( document.getElementsByClassName("a").length);
}

更新：

在Ian的评论之后，双重检查了jsfiddle并发现它已选中onLoad。所以这里是带有window.onload和更新的jsfiddle：

的更正代码

window.onload = function() {
  document.getElementById("all").onclick = function() {
    alert( document.getElementsByClassName("a").length);
  };
};

以下是jsfiddle。

Answer 2

在加载DOM之前，您正在运行JS。这意味着当JS运行时，DOM中不存在元素all。写下面的内容，这就是你要做的事。

var attachEve = function(){
   document.getElementById("all").onclick = function() {
       alert( document.getElementsByClassName("a").length);
   }
}
window.onload = attachEve;

它应该工作！没有window.onload在jsfiddle中工作，因为jsfiddle在window.onload上下文中运行JS。

onclick事件不起作用，而是在页面加载时触发

2 个答案: