gpt4 book ai didi

javascript - onclick 事件中的函数不起作用

转载 作者:行者123 更新时间:2023-11-30 15:32:38 24 4
gpt4 key购买 nike

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

我不知道我错过了什么。另外我应该提一下,我已经检查过 JavaScript 是否正确链接到 HTML,事实确实如此。

https://jsfiddle.net/5sg4owpu/7/

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!");
};

最佳答案

它没有按预期工作,因为方法 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!");
});
}

关于javascript - onclick 事件中的函数不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42015381/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com