onclick 事件中的函数不起作用

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 return 是一个元素集合。这意味着您需要访问该集合中的特定元素才能添加事件侦听器。您试图向整个集合添加一个事件侦听器，这显然不起作用。

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

Updated Example

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

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

但是，最好只使用 document.querySelector 等方法来 select 所需的元素。在这种情况下，方法 querySelector 只会 return 一个元素。

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() returns 一个数组，你需要访问数组的第一个元素，这样你就可以定义它的 onclick 函数：

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

Answer 3

getElementsByClassName returns 数组和数组没有 onclick 函数。您需要访问元素并在其上设置函数回调。

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

onclick 事件中的函数不起作用

Function inside onclick event does not work

javascript

html

function

onclick

getelementsbyclassname