我對編程還是比較陌生，所以如果這有明顯的解決方法，我深表歉意。我一直在嘗試除錯這段代碼。我已經閱讀了幾個圍繞這個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>uj5u.com熱心網友回復：
問題是這一行：
for (let i = 0; i <= elements.length; i )
您收到該錯誤是因為在最后一次迭代中i=elements.length， 和elements[elements.length] = undefined。
它應該是 ：
for (let i = 0; i < elements.length; i )
uj5u.com熱心網友回復：
正如@yousoumar 所說，你迭代得太遠了。陣列索引從0開始，到元素數量 - 1結束。您收到的錯誤是由于您嘗試參考元素陣列中不存在的索引引起的。
例如：
elements = |a|b|c|d|
index = 0 1 2 3
your last iter = elements[4], which is outside of the index range.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475825.html
標籤：javascript html css 打字稿