<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”。当我将鼠标移开时，输出必须“mouseover”。但是，我收到错误 Uncaught TypeError: Cannot read property 'addEventListener' of undefined。我到处搜索这个问题，但没有解决我的错误的方法。