Question

我在onclick事件中定义的函数不起作用。

我不知道自己错过了什么。另外我应该提一下，我已经检查过JavaScript是否正确链接到HTML并且是。

HTML：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title> Practice 1</title>
    <link href="indexStyle.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <p class="hello">Hello There!</p>

    <script src="newjavascript.js"></script>

  </body>
</html>

CSS：

.hello {
  border: 1px solid black;
  width: 100px;
  background: blue;
}

JavaScript的：

var mm = document.getElementsByClassName("hello");
mm.onclick=function () {
    alert("It worked!");
};

Answer 1

它没有按预期工作，因为方法getElementsByClassName返回元素集合。这意味着您需要访问该集合中的特定元素才能添加事件侦听器。您试图将事件监听器添加到整个集合中，这显然无法正常工作。

例如，您可以将事件侦听器添加到集合中的第一个元素：

Updated Example

var m1 = document.getElementsByClassName("hello");

m1[0].onclick = function() {
  alert("It worked!");
};

但是，最好只使用document.querySelector之类的方法来选择所需的元素。在这种情况下，方法querySelector将只返回单个元素。

Updated Example

var m1 = document.querySelector(".hello");

m1.addEventListener('click', function () {
  alert("It worked!");
});

您可能还想在应用事件侦听器之前检查以确保该元素存在，否则将引发错误：

var m1 = document.querySelector(".hello");

if (m1) {
  m1.addEventListener('click', function() {
    alert("It worked!");
  });
}

Answer 2

document.getElementsByClassName()返回一个数组，您需要访问该数组的第一个元素，以便您可以定义其onclick函数：

var mm = document.getElementsByClassName("hello")[0];
mm.onclick = function() {
  alert("It worked!");
};

Answer 3

getElementsByClassName返回一个数组，而数组没有onclick函数。您需要访问该元素并在其上设置函数回调。

var mm=document.getElementsByClassName("hello");
mm[0].onclick=function(){
    alert("It worked!");
};

onclick事件内的功能不起作用

3 个答案: