无法读取未定义的属性“addEventListener”[关闭]

Posted 2023-03-16

【中文标题】无法读取未定义的属性“addEventListener”[关闭]

【英文标题】：Cannot read the property 'addEventListener' of undefined [closed]

【发布时间】：2021-04-17 17:44:15

【问题描述】：

我试图在您悬停时制作动画，如果您停止悬停，则强制动画完成，但问题是 javascript 代码告诉我有错误。

当我将 i <= elements.length; 更改为 i < elements.length; 时，它不会给我错误，但动画不起作用。

// FOOTER MAIL ANIMATION
const elements = document.getElementsByClassName(".mail");

for (let i = 0; i <= elements.length; i++) 
  elements[i].addEventListener("animationend", function (e) 
    elements[i].classList.remove("animated");
  );

  elements[i].addEventListener("mouseover", function (e) 
    elements[i].classList.add("animated");
  );

.mail 
  position: relative;
  left: 50%;
  transform: translate(-50%);
  margin-top: 25px;
  width: 300px;
  height: 60px;
  background-color: #008aff;
  border: none;
  overflow: hidden;


.mail a 
  position: relative;
  color: black;
  font-size: 20px;
  transition: 0.5s;


.mail i 
  position: relative;
  color: black;
  font-size: 30px;
  bottom: -3.5px;
  padding-left: 20px;


.mail.animated i 
  animation: correo 1s;


@keyframes correo 
  20% 
    transform: translate(-10px);
  
  80% 
    transform: translate(100px);
  
  81% 
    transform: translate(0, -50px);
  

          <button class="mail">
            <a href="mailto:" class="titulo">Enviar email <i class="far fa-envelope"></i></a>
          </button>
            <script src="https://kit.fontawesome.com/399548db15.js" crossorigin="anonymous"></script>

【问题讨论】：

这是一个错字，删除getElementsByClassName中邮件前的句点，在你的for循环中，使用不带等号的<。

使用i <= elements.length; 时出现错误的原因是您应该改用i <= elements.length -1;。假设您的数组有 3 个元素，因此 elements.length 将返回 3。最后一个循环中 i 的值将是 3，这是 elements 的无效索引，因为 elements[3] 不存在（未定义） )。在 Javascript 中，索引从零开始。

【参考方案1】：

使用getElementsByClassName时，不需要使用点。

你目前拥有的：

document.getElementsByClassName(".mail");

应该是什么：

document.getElementsByClassName("mail");

使用querySelector时只需要点

【讨论】：

我没有意识到，它现在可以工作但告诉我仍然有错误，我将i <= elements 更改为i < elements，现在可以正常工作了，谢谢！！！跨度>