Kann nicht Eigentum ‚classlist‘ undefinierter

Question

Ich versuche, einen einfachen Schieberegler zu tun, lesen, aber ich habe ich dieses Problem:

Uncaught TypeError: Cannot read property 'classList' of undefined 

Dies ist mein Code:

var div = document.querySelectorAll("div"); 

for(var i = 0; i < 6; i++){ 
    div[i].onclick = function() { 
     this.classList.remove("active"); 
     div[i+1].classList.add("active"); 
    } 
} 

Kann jemand helfen mir bitte ?

Answer 1

Es scheint, als könnte dies auftreten, weil ich auf die äußere Funktion beschränkt ist, so wird es immer auf den Maximalwert für i gesetzt. Aus diesem Grund wird div[i + 1] immer undefiniert sein. Was Sie tun können ist:

div[i].onclick = function(idx) { 
    this.classList.remove("active"); 
    if(idx < div.length - 1) div[idx + 1].classList.add("active"); 
}.bind(div[i], i); 

Welche binden tut, ist es eine Momentaufnahme der Werte der Variablen nimmt, die Sie Funktionen sind vorbei, sowie einen Wert für „dieses“. Der Wert für "this" kommt zuerst, dann folgen Argumente für die Funktion. Sie gibt dann die aufgerufene Funktion zurück, wobei eine Teilmenge ihrer Argumente an die von Ihnen angegebenen Werte gebunden ist. Alle Argumente, die nicht gebunden sind, können vom Aufrufer bereitgestellt werden, aber alle gebundenen Argumente müssen vor den vom Aufrufer angegebenen Argumenten kommen.