Pure JavaScript - for loop works with elements[0] but not with elements[i]

Question

My simplified code, which should add an EventListener to each b element within my navigation, looks like this:

function openSubNavs2()
{
 var allToggleBs = document.querySelector('ul#nav').getElementsByTagName('b');
 for (var i=0; i<allToggleBs.length; i++)
 {
  var toggleB = allToggleBs[i];
  toggleB.addEventListener('click', function()
  {
   toggleB.className = 'show';
  });
 }
}
window.addEventListener('load', function() {openSubNavs2();});

but the EventListener 'click' is not created.

If I change the increasing allToggleBs[i] to a static allToggleBs[0], the first b element gets the class "show" when clicked - just as expected. The same works with allToggleBs[1] for the second b element.

So basically the b elements are found correctly, but the for loop is not working, and I can't find the reason why.

Possible duplicate of [javascript 'let' and 'var' in for-loops](https://stackoverflow.com/questions/43847863/javascript-let-and-var-in-for-loops) — zmag, Feb 26 '19 at 13:19
toggleB will not stay the same after the loop finishes. Either use `event.target` or `this` to refer to the clicked tag instead of the variabel toggleB. YOu could also just add One click event to the nav instead of a click per tag and then use event.target to have One event to handle All cases. — Shilly, Feb 26 '19 at 13:19
Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Nick Parsons, Feb 26 '19 at 13:33

score 1 · Answer 1 · answered Feb 26 '19 at 13:18

1

Declare the variable with let instead of var which will create individual scope.

for (let i=0; i<allToggleBs.length; i++)

answered Feb 26 '19 at 13:18

Mamun

66,969
9
47
59

score 1 · Accepted Answer · answered Feb 26 '19 at 13:21

1

You can also use anonymous function if you need es3 support:

function openSubNavs2()
{
    var allToggleBs = document.querySelector('ul#nav').getElementsByTagName('b');
    for (var i=0; i<allToggleBs.length; i++)
    {
        (function(toggleB) {
            toggleB.addEventListener('click', function() {
                toggleB.className = 'show';
            });
        })(allToggleBs[i]);
    }
}

answered Feb 26 '19 at 13:21

deathangel908

8,601
8
47
81

While let instead of var (see other posts) is useful, it didn't solve the problem. Your solution does. – EricBln Feb 26 '19 at 14:16

score 1 · Answer 3 · answered Feb 26 '19 at 13:21

I think you are lossing the context of i. You could declare the i var with let instead of var. Or still using ES5, wrapping i in a closure (so there, i won't change its value):

function openSubNavs2()
{
    var allToggleBs = document.querySelector('ul#nav').getElementsByTagName('b');
    for (var i=0; i<allToggleBs.length; i++)
    {
        (function(i) {
            var toggleB = allToggleBs[i];
            toggleB.addEventListener('click', function()
            {
                toggleB.className = 'show';
            });
        })(i);

    }
}
window.addEventListener('load', function() {openSubNavs2();});

While let instead of var (see other posts) is useful, it didn't solve the problem. Your solution does, I just chose the other one for its support of some older browsers (while otherwise doing the same). — EricBln, Feb 26 '19 at 14:15

score 0 · Answer 4 · answered Feb 26 '19 at 13:21

0

Declare variable with let rather than var .You can use

for (let i=0; i<allToggleBs.length; i++)

answered Feb 26 '19 at 13:21

Khushal Agarwal

44
1
8

Pure JavaScript - for loop works with elements[0] but not with elements[i]

4 Answers4