Javascript function runs indefinitely when inside for-loop

Question

On my page, I am adding <div> elements to the page using javascript. The content and number of 's comes from the content of a folder on the server. the page have a number of columns and I want to add each new to the smallest column. I created this function to determine what column is the smallest. When run/tested on a single request the function works as intended. when I call the function inside my "for-loop" with the elements that need to be added it runs indefinitely?

for for-loop is

for(i = 0; i < importedElement.length; i++){}

the function is

function findSmallestColumn() {
    var columns = document.getElementById("container").children;
    var columnsHeight = [];
    for (i = 0; i < numberOfColumns; i++) {
        columnsHeight[i] = columns[i].offsetHeight;
    }
    var min = Math.min(...columnsHeight);
    var minIndex = columnsHeight.indexOf(min) + 1;
    return minIndex;
}

*The "numberOfColumns is a var with a number attached.

You've forgotten the var (or let) on both definitions of i.. — thebjorn
– thebjorn, Commented Sep 28, 2017 at 11:08

bamtheboozle · Accepted Answer · 2017-09-28 11:12:08Z

3

You have a second for loop inside your function, which infinitely increases i. Replace i with j or any other variable name in any of the two for loops and it will work as expected.

You could use the same variable name, i if you declare them locally inside the for loop using the let keyword, which declares variables only in the current block.

edited Sep 28, 2017 at 11:12

answered Sep 28, 2017 at 11:07

bamtheboozle

6,5162 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

4thex Over a year ago

The reason is that variables in JavaScript are scoped to functions. The for-loop does not provide a new scope. It should work if you re-declare the variable i inside the function.

Peter Christmas-Kjaer Over a year ago

Thank you very much! So clear now but I have been staring me blind on this for hours.

Useless Code Over a year ago

This question is a good example of why you should always use strict mode, it will complain if you forget to declare a variable and save you those hours of frustration. Using a linter also helps a lot with this kind of bug.

Collectives™ on Stack Overflow

Javascript function runs indefinitely when inside for-loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related