you had a wrong div placed after the buttons div there ,,,
that was probably the reason ... check again and let me know if sth goes wrong
let arrows = document.querySelectorAll('.buttons .fas')
for (const arrow of arrows) {
arrow.addEventListener('click',function(){
if (arrow.classList.contains('fa-arrow-up')) {
console.log('arrow clicked')
}
})
}
.buttons {
font-size: 48px;
}
<h1>Dance Time</h1>
<div class="buttons">
<i class="fas fa-arrow-up">first</i>
<i class="fas fa-arrow-down">second</i>
<i class="fas fa-arrow-left">third</i>
<i class="fas fa-arrow-right">fourth</i>
</div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
