开发者问题收集

TypeError：无法读取未定义的属性（读取‘addEventListener’）

2022-05-16
5673
javascript html css typescript

我对编程还比较陌生，所以如果这个问题有明显的解决办法，我深表歉意。我一直在尝试调试此代码。我阅读了几个围绕此 addEventListener 错误的问题。似乎大多数问题都建议确保在 TS 运行之前将元素加载到 DOM 中。

为了确保这一点，我在 ngAfterViewInit() { 下运行了该方法，并且还将核心功能包装在 window.onload = function() { 中。我希望这些可以解决问题，但我仍然收到错误。我会说 TS、HTML、CSS 功能按预期工作。我将鼠标悬停在字母上，字母会改变颜色并动画，但是错误让我很沮丧。我将包括我的 TS、HTML 和 CSS。谢谢！ 

constructor() {}

ngOnInit(): void {}

ngAfterViewInit() {
  this.changeClass();
}

changeClass() {

  window.onload = function() {
    const elements = document.getElementsByClassName('wordPop');

    if (elements) {
      for (let i = 0; i <= elements.length; i++) {
        elements[i].addEventListener('mouseover', () => {
          elements[i].classList.add('animated');
        });

        elements[i].addEventListener('animationend', () => {
          elements[i].classList.remove('animated');
        });
      }
h1 {
  font-family: Arial, Helvetica, sans-serif;
  display: inline-block;
}

.blastRubberBand {
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
  position: relative;
  font-size: 100px;
  color: rgb(228, 15, 115);
}

.wordPop {
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
  position: relative;
  font-size: 100px;
  color: aliceblue;
}

.wordPop.animated {
  color: orange;
  animation: rubberBand 0.7s ease-in-out 1;
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, .95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<h1 class="coolLetters">
  <span class="wordPop">H</span>
  <span class="wordPop">e</span>
  <span class="wordPop">l</span>
  <span class="wordPop">l</span>
  <span class="wordPop">o</span>
</h1>
2个回答

问题出在这行： 

for (let i = 0; i <= elements.length; i++)

您收到该错误是因为在最后一次迭代中， i=elements.length ，并且 elements[elements.length] == undefined 。

相反，它应该是： 

for (let i = 0; i < elements.length; i++)
Youssouf Oumar
2022-05-16

正如@YoussoufOumar 所说，您迭代得太远了。数组索引从 0 开始，到 元素数 - 1 结束。您收到的错误是由于您尝试引用元素数组中不存在的索引而导致的。

例如： 

elements = |a|b|c|d|
index =     0 1 2 3 
your last iter = elements[4], which is outside of the index range.
Hashim Jacobs
2022-05-16