javascript - 未捕获的类型错误:无法读取我的 JS 文件中未定义错误的属性“addEventListener”
问题描述
<div class="card-body">
<hr>
<h5 class="card-title" id = "tasks-title">Todo's</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id = "filter" placeholder="Search A Todo">
</div>
</div>
<div>
我在顶部给出了我的 HTML 代码。JS代码在下面:
const cardBody = document.querySelectorAll(".card-body")[2];
const title = document.querySelector("#tasks-title");
cardBody.addEventListener("mouseenter",run);
cardBody.addEventListener("mouseleave", run);
function run(e) {
console.log(e.type);}
在这种情况下,当我将鼠标悬停在 cardBody 元素上时,输出必须写为“mouseenter”。当我用鼠标离开时,输出必须“鼠标悬停”。但是,我收到一个错误 Uncaught TypeError: Cannot read property 'addEventListener' of undefined。我到处搜索这个问题,但没有解决我的错误。
解决方案
只有一个元素具有类名card-body
。所以你应该指出document.querySelectorAll(".card-body")[0]
const cardBody = document.querySelectorAll(".card-body")[0];
const title = document.querySelector("#tasks-title");
cardBody.addEventListener("mouseenter", run);
cardBody.addEventListener("mouseleave", run);
function run(e) {
console.log(e.type);
}
<div class="card-body">
<hr>
<h5 class="card-title" id="tasks-title">Todo's</h5>
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="filter" id="filter" placeholder="Search A Todo">
</div>
</div>
<div>
推荐阅读
- javascript - 异步向方法发送参数
- ios - 将视频保存到存储中而不显示在照片库中(Swift iOS)
- sql - 在 SQL 中,如果返回的字符串介于起始字母“a”到“m”之间,您将如何返回列的字符串值?
- python - 滚动到 Selenium (Python) 中的下一个元素
- git - git rebase 是否会更改 SHA?
- java - jsoup登录并解析html
- javascript - 如何在单击时删除并在双击特定标签时删除
- mysql - 如何等待事务查询执行 Express JS?
- javascript - jQuery 使用 delay() 和 hide()
- python - 无法从其他文件打印变量