gpt4 book ai didi

javascript - 将 onclick 事件附加到元素不起作用

转载 作者:行者123 更新时间:2023-11-30 17:43:36 24 4
gpt4 key购买 nike

我刚开始学习 Javascript,几乎一无所知。我正在尝试将 onclick 事件附加到我的 HTML 中的元素。

var joinList = function() {
alert("This should display when clicked");
}
document.getElementById("header").onclick = joinList;

到目前为止,这是我的代码。单击 ID 为 header 的元素时没有任何反应。我做错了什么?

以下是我的HTML代码

<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<script src="testing.js"></script>
</head>

<body>
<h1 id="header">Andrew Dawson</h1>
</body>
</html>

最佳答案

问题是,您尝试加载一个 html 元素,该元素在执行 javascript 函数时并不“存在”,因为 dom 尚未完成加载。为了使您的代码正常工作,您可以尝试以下解决方案:

将您的脚本标记放在 HTML 的下方:

<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
</head>

<body>
<h1 id="header">Andrew Dawson</h1>
<script src="testing.js"></script>
</body>
</html>

添加事件处理程序以检查窗口元素是否准备就绪:

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded(){

var joinList = function() {
alert("This should display when clicked");
}
document.getElementById("header").onclick = joinList;

}

另一种解决方案是使用 jquery 框架和相关的文档准备功能 http://api.jquery.com/ready/

关于javascript - 将 onclick 事件附加到元素不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20575774/

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