javascript - addEventListener to array of elements and target array of elements -

this question has answer here:

• javascript closure inside loops – simple practical example 32 answers

window.onload = function() {     // set default landing page:      window.location.replace("#overview");     // register click event listener top navigation:     var navbarbuttons = ["class1","class2","class3","class4","class5","class6","class7","class8","class9"];     var navbartargets = ["id1","id2","id3","id4","id5","id6","id7","id8","id9"];     registernavbar(navbarbuttons, navbartargets); } function registernavbar(navbarbuttons, navbartargets){     (var i=0; i<navbarbuttons.length; i++){         sourceelement=document.queryselector("#left_nav .".concat(navbarbuttons[i]));         sourceelement.addeventlistener("click",clicknavbarbutton({targets:navbartargets,index:i}))     } } function clicknavbarbutton(event){     clearpages(event.targets);     document.queryselector("#".concat(event.targets[event.index])).classlist.add("active"); } function clearpages(navbartargets) {     (i=0; i<navbartargets.length; i++){         var target = "#".concat(navbartargets[i]),classlist=document.queryselector(target).classlist;            if (classlist.contains("active")){             classlist.remove("active")         }     } } 

im trying to add onclick events elements in navigation bar looks this:

 <div id="left_nav">                 <a href="#overview" title="overview"><span class="class1"></span></a> 

the registernavbar() function fails add onclick events elements getting returned #left_nav .classn selectors. .active class defined

.active {     display: block!important } 

while default state

display: none 

so adding/removing .active class toggles visibility. using external libraries not option.

currently functions in loop beeing performed without throwing errors , end element #id9 beeing displayed, buttons won't trigger onclick events when clicked. how add eventlisteners elements in array?

you can create closure keep event object data

function registernavbar(navbarbuttons, navbartargets){     (var i=0; i<navbarbuttons.length; i++){         sourceelement=document.queryselector("#left_nav .".concat(navbarbuttons[i]));         sourceelement.addeventlistener("click",clicknavbarbutton({targets:navbartargets,index:i}))     } } function clicknavbarbutton(event){   return function(){     clearpages(event.targets);     document.queryselector("#".concat(event.targets[event.index])).classlist.add("active");     } }