Javascript Eventlistener Schleife mit eigenen Attributen

Question

Ich habe ein Problem.

<button test="page1">page1</button> 
<button test="page2">page2</button> 
<br> 
<button test2="page1">page1</button> 
<button test2="page2">page2</button> 



var location = document.querySelectorAll("[test]"); 
var location2 = document.querySelectorAll("[test2]"); 

location.forEach(function(e1, e2){ 
    location[e2].addEventListener("click", function(){ 
    alert(location[e2].getAttribute("test")); 
    }); 
}); 

for(var i = 0; i < location2.length; i++){ 
    location2[i].addEventListener("click", function(){ 
    alert(location2[i].getAttribute("test2")); 
    }); 
} 

https://jsfiddle.net/zeus1309/jqL8b0rt/

Die Version mit foreach funktioniert: Ich habe ein div-Element innerhalb x Subelemente (Tasten usw.) und die Teilelemente i einen Eventlistener mit einer Schleife hinzufügen werde, ich habe eine Geige zur Verfügung gestellt. aber der mit nicht. Ich verstehe nicht warum.

Answer 1

Anstelle von location2[i].getAttribute("test2")this.getAttribute("test2") verwenden.

Hinweis: Innerhalb der forEach()-Funktion müssen Sie nicht beide Argumente verwenden.

var location = document.querySelectorAll("[test]"); 
 
var location2 = document.querySelectorAll("[test2]"); 
 

 
location.forEach(function(e){ 
 
    e.addEventListener("click", function(){ 
 
    alert(e.getAttribute("test")); 
 
    }); 
 
}); 
 

 

 
for(var i = 0; i < location2.length; i++){ 
 
\t location2[i].addEventListener("click", function(){ 
 
    \t alert(this.getAttribute("test2")); 
 
    }); 
 
}

<button test="page1">page1</button> 
 
<button test="page2">page2</button> 
 
<br> 
 
<button test2="page1">page1</button> 
 
<button test2="page2">page2</button>