Why do I get “Uncaught TypeError: Cannot read property 'style' of null” of an element in an array?

Question

I'm using JavaScript to perform the initial setup of some elements and the manipulation of these elements when I hover over them with the mouse cursor. When getting the elements by class name and iterating through them to change the style, I am receiving "Uncaught TypeError: Cannot read property 'style' of null" message.

• Positioned the JavaScript code in and out of the body (currently sitting at the end of the HTML document in the body).
• Tried assigning IDs to the elements and using getElementById instead.

 var cards = document.getElementsByClassName('card'); var initialOffset = 100; (function initialLoad() { for (var i = 0; i <= cards.length; i++) { cards[i].style.zIndex = i; if (i > 0) { cards[i].style.left = cards[i - 1].offsetLeft + initialOffset + 'px'; } } })(); 

 .card-container { position: absolute; margin: 20px auto; } .card { position: absolute; background: rgb(236, 236, 236); border: 1px solid black; height: 250px; width: 200px; } 

 <header> <div class="cards-container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> </header> 

The odd thing is, the setup will actually function even though the error is thrown. The error seems to cause issues later on though, which is why I'm trying to eliminate it now.

Answer 1

As pointed out by @str use < instead of <= :

 var cards = document.getElementsByClassName('card'); var initialOffset = 100; (function initialLoad() { for (var i = 0; i < cards.length; i++) { cards[i].style.zIndex = i; if (i > 0) { cards[i].style.left = cards[i - 1].offsetLeft + initialOffset + 'px'; } } })(); 

 .card-container { position: absolute; margin: 20px auto; } .card { position: absolute; background: rgb(236, 236, 236); border: 1px solid black; height: 250px; width: 200px; } 

 <header> <div class="cards-container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> </header> 

Or as suggested by @Barmar you can use forEach :

 var cards = [...document.querySelectorAll('.card')]; var initialOffset = 100; (function initialLoad() { cards.forEach((card, i) => { card.style.zIndex = i; if (i > 0) { card.style.left = cards[i - 1].offsetLeft + initialOffset + 'px'; } }); })(); 

 .card-container { position: absolute; margin: 20px auto; } .card { position: absolute; background: rgb(236, 236, 236); border: 1px solid black; height: 250px; width: 200px; } 

 <header> <div class="cards-container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> </header>