addEventListener auf Anordnung von Elementen und Ziel Anordnung von Elementen

Question

window.onload = function() { 
    // set default for landing page: 
    window.location.replace("#Overview"); 
    // register click event listener for 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){ 
    for (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) { 
    for (i=0; i<navBarTargets.length; i++){ 
     var target = "#".concat(navBarTargets[i]),classList=document.querySelector(target).classList; 
     if (classList.contains("active")){ 
      classList.remove("active") 
     } 
    } 
} 

Im Versuch, ein OnClick Ereignis Elemente in meiner Navigationsleiste hinzuzufügen, die wie folgt aussieht:

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

Die registerNavBar() Funktion hinzuzufügen, schlägt fehl onclick Ereignisse zu den Elementen, die von den #left_nav .classn Selektoren zurückgebracht werden. Die .active Klasse als

.active { 
    display: block!important 
} 

definiert wird, während der Standardzustand ist

display: none 

so das Hinzufügen/Entfernen der .active Klasse Sichtbarkeit schaltet. Die Verwendung externer Bibliotheken ist keine Option.

Momentan werden alle Funktionen in der Schleife ausgeführt, ohne Fehler zu werfen, und ich werde mit dem Element # id9 angezeigt, aber die Schaltflächen werden nicht die onclick Ereignisse auslösen, wenn geklickt wird. Wie fügt man EventListeners allen Elementen im Array korrekt hinzu?

Answer 1

können Sie eine closure erstellen die Ereignisobjektdaten

function registerNavBar(navBarButtons, navBarTargets){ 
    for (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"); 
    } 
}