How can one properly iterate through an HTML Collection in JavaScript?

Question

How can one properly iterate through an HTML Collection in JavaScript?

I need help with creating a slider using JavaScript. The code I have written below calculates the widths of the slides, but it's throwing an error in the console. Can someone advise on how to properly loop through and assign width to these elements?

Javascript


var calcSlideWidth = function(divId){
    let slDiv = document.getElementById(divId);
    let slides = slDiv.getElementsByClassName('slide');
    slDiv.style.width = 100 * slides.length + "%";
    slideWidth = 100 / slides.length;
    for (let i = 0; i < slides.length; i++){
        slides[i].style.width = slideWidth + "%";
        console.log(i);
    }
}   

window.onload  = function(){
   calcSlideWidth("slider");
}

HTML

<div class="slider-container">
    <ul id="slider">
        <li class="slide"><span>Slide 1</span></li>
        <li class="slide"><span>Slide 2</span></li>
        <li class="slide"><span>Slide 3</span></li>
    </ul>
</div>

javascript loops

Answer 1

Answer №1

The issue is related to accessing the position length

let i = 0; i <= slides.length
              ^

This condition will try to access a non-existent position, so you should change it to:

let i = 0; i < slides.length
             ^

By doing this, the access will be from 0 up to length - 1

Answer 2

The issue is related to accessing the position length

let i = 0; i <= slides.length
              ^

This condition will try to access a non-existent position, so you should change it to:

let i = 0; i < slides.length
             ^

By doing this, the access will be from 0 up to length - 1

Answer 3

Answer №2

Consider utilizing querySelectorAll over the getElementsBy* methods when working with HTMLCollections. querySelectorAll returns a static NodeList that is easier to iterate over directly, ensuring it won't change during iteration and offers greater flexibility.

document.querySelectorAll('.slide').forEach(slide => {
  // do stuff with each slide
  slide.style.width = `${slideWidth}%`;
});

Avoid using traditional for loops as they may not clearly express your code's intention. Opt for higher-order functions like .map, .reduce, .filter whenever possible. Check out: and https://gist.github.com/robotlolita/7643014

(using .forEach helps prevent off-by-one errors)

Note that some older browsers may not support NodeList.forEach - ensure proper polyfilling if you plan to use this method in your distribution.

Answer 4

Consider utilizing querySelectorAll over the getElementsBy* methods when working with HTMLCollections. querySelectorAll returns a static NodeList that is easier to iterate over directly, ensuring it won't change during iteration and offers greater flexibility.

document.querySelectorAll('.slide').forEach(slide => {
  // do stuff with each slide
  slide.style.width = `${slideWidth}%`;
});

Avoid using traditional for loops as they may not clearly express your code's intention. Opt for higher-order functions like .map, .reduce, .filter whenever possible. Check out: and https://gist.github.com/robotlolita/7643014

(using .forEach helps prevent off-by-one errors)

Note that some older browsers may not support NodeList.forEach - ensure proper polyfilling if you plan to use this method in your distribution.

How can one properly iterate through an HTML Collection in JavaScript?

Answer №1

Answer №2

Similar questions

Is there a way to programmatically fetch files from a MySql / Node.js server?

Interacting with API through AngularJS $http.get

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

Determining the percentage of a bar in d3.js when hovering over it

Ways to retrieve every element inside a specific div container

What is the optimal approach for displaying numerous button components with varying values?

Is the branch of ExtJS 4.1 TreeStore lazy loading extending?

What is the process for generating a submatch for this specific expression?

Unable to retrieve JSON data in servlet

Issue with Many to Many Relation Query in Objection JS, Postgres, and Express Resulting in 'TypeError: Cannot Read Property 'isPartial' of Null' Error

The ID of the jQuery droppable element cannot be found

Implementing a dynamic function with jQuery Tokenize's change event

Leveraging Javascript to retrieve input values

Tips for ensuring the server only responds after receiving a message from the client in a UDP Pinger system using sockets

Is there an issue with the initial positioning of the tooltip in the seiyria angular-bootstrap slider?

Passport Node: Issue with Password Comparison results in an undefined function error, causing return done(null, user) to fail

Having an issue with my Django model not properly saving data when receiving a POST

XPath Selector in Puppeteer version 22.x

"Utilize the parent component's functionality by extending/inheriting it

Using the mt-downloader module in a Node application is a straightforward process