I'm still relatively new to programming, so my apologies if this has an obvious fix. I have been trying to debug this code. I've read through several questions revolving around this addEventListener error. It seems that most of them suggest to ensure that the elements are loaded in the DOM before the TS runs.

To ensure this I ran the method under ngAfterViewInit() {} and I also wrapped the core functionality within a window.onload = function() {}. I hoped these would fix the problem, but I'm still receiving the error. I will say that the TS, HTML, CSS functionality is working as intended. I hover over the letters and the letters change color and animate, however the error is just frustrating me. I will include my TS, HTML, and CSS. Thank you!

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=".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>

I'm still relatively new to programming, so my apologies if this has an obvious fix. I have been trying to debug this code. I've read through several questions revolving around this addEventListener error. It seems that most of them suggest to ensure that the elements are loaded in the DOM before the TS runs.

To ensure this I ran the method under ngAfterViewInit() {} and I also wrapped the core functionality within a window.onload = function() {}. I hoped these would fix the problem, but I'm still receiving the error. I will say that the TS, HTML, CSS functionality is working as intended. I hover over the letters and the letters change color and animate, however the error is just frustrating me. I will include my TS, HTML, and CSS. Thank you!

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./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>

• javascript
• html
• css
• typescript

2 Answers 2

The problem is this line:

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

You are getting that error because on the last iteration, i=elements.length, and elements[elements.length] == undefined.

Instead, it should be:

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

As @YoussoufOumar stated, you are iterating too far. Array indices begin at 0 and end at number of elements - 1. The error you are receiving is caused by your attempt to reference a non-existent index in your array of elements.

For example:

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