Function call inside a for loop breaks the loop

Question

I have a small fiddle I was experimenting with, and I noticed calling a function inside a for loop condition was stopping the loop. Basically, initially I wanted to do this:

// add event listeners to tabs
for (i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click', function(event) {
        var tab = event.target;
        selectPage(tab.dataset.tab);
        changeTab(tab);
    });
    if (tabs[i].classList.contains('active')) {
        selectPage(tabs[i].dataset.tab);
    }
}

But, ended up having to do this to make it work:

// add event listeners to tabs
for (i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click', function(event) {
        var tab = event.target;
        selectPage(tab.dataset.tab);
        changeTab(tab);
    });
}
// find active class and set page
for (i=0;i<tabs.length;i++) {
  if (tabs[i].classList.contains('active')) {
     selectPage(tabs[i].dataset.tab);
  }
}

Here is a link to the Fiddle

Thanks for any help in advance, I feel there is something fundamental here I'm not getting. Thanks

That's impossible!

Ele
– Ele

2017-12-31 02:25:58 +00:00
Commented Dec 31, 2017 at 2:25 — Ele
– Ele, Commented Dec 31, 2017 at 2:25
Ok, could you explain...

halfacreyum
– halfacreyum

2017-12-31 02:26:33 +00:00
Commented Dec 31, 2017 at 2:26 — halfacreyum
– halfacreyum, Commented Dec 31, 2017 at 2:26
Look at my answer

Ele
– Ele

2017-12-31 02:44:09 +00:00
Commented Dec 31, 2017 at 2:44 — Ele
– Ele, Commented Dec 31, 2017 at 2:44

raina77ow · Accepted Answer · 2017-12-31 02:39:47Z

1

Lesson 0: use ESLint or similar tools to check your code for trivial errors before spending sleepless nights here on SO and/or in debugging tools.

Lesson 1: localize your variables.

Your problem is with variable i that's global - hence reused by both your global code and selectPage function. The latter sets its value to tabs.length, ending up the loop prematurely.

Just replace i = 0 with var i = 0 at each for expression.

answered Dec 31, 2017 at 2:39

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

1 Comment

halfacreyum Over a year ago

Thank you, for the thorough answer, explanation, and suggesting using ESLint!

HelloWorldPeace · Accepted Answer · 2017-12-31 02:49:41Z

1

Try declaring the x variable using let.

// add event listeners to tabs
for (let i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click', function(event) {
    var tab = event.target;
    selectPage(tab.dataset.tab);
    changeTab(tab);
  });
  if (tabs[i].classList.contains('active')) {
    selectPage(tabs[i].dataset.tab);
  }
}

answered Dec 31, 2017 at 2:49

HelloWorldPeace

1,40515 silver badges12 bronze badges

2 Comments

Killzone Kid Over a year ago

up for suggesting let

halfacreyum Over a year ago

Thanks, for the suggestion. I changed vars to let. I'm brushing up on Vanilla JS while learning React, I have become to reliant on jQuery.

Collectives™ on Stack Overflow

Function call inside a for loop breaks the loop

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related