javascript - zapętlenie addEventListener

0

Witam

Mam problem z zapętleniem addEventListener klikając pierwszy element wszystko jest oki i wyskakuje alert z liczbą 1 ale w pozostały 7 okienkach niestety już tak nie jest i zamiast kolejnych liczb: 2, 3, 4, 5, 6, 7, 8 to wyskakuje we wszystkich 9. co radzicie?

<html>
<head>
   <title>Przykład</title>
   <style type="text/css">
     table tr td { border: solid 1px silver; height: 50px; width: 50px; }
   </style>   
</head> 
<body> 
<table> 
   <tr><td id="t1">1</td><td id="t2">2</td></tr> 
   <tr><td id="t3">3</td><td id="t4">4</td></tr> 
   <tr><td id="t5">5</td><td id="t6">6</td></tr> 
   <tr><td id="t7">7</td><td id="t8">8</td></tr>    
</table>      
     
<script type="text/javascript">
      var tab = [];
      tab[1] = document.getElementById("t1");
      tab[1].addEventListener('click',function(){nacisnij(1);},false);    
      
      for (xx=2;xx<=8;xx++){
         tab[xx] = document.getElementById("t"+xx);
         tab[xx].addEventListener('click',function(){nacisnij(xx);},false);
      }    
      
      function nacisnij(id){
          alert("nacisnij="+id);
      }
</script>
     
 </body> 
 </html>
0

Polecam zainwestować w dobry IDE, który takie błędy Ci pokaże ;)

Przyczyna:
http://i.imgur.com/CXg2Ii9.jpg

Opis problemu:
http://james.padolsey.com/javascript/closures-in-javascript/

Rozwiązanie:

for (var xx=2;xx<=8;xx++){
        tab[xx] = document.getElementById("t"+xx);
        (function(yy){
            tab[yy].addEventListener('click',function(){nacisnij(yy);},false);
        })(xx);
}
0

ooo moj netbeans tego nie pokazuje, mozna poprosic nazwe ow IDE? tak w ogole dziekuje za rozwiazanie :)

1
dzek69 napisał(a):
for (var xx=2;xx<=8;xx++){
        tab[xx] = document.getElementById("t"+xx);
        (function(yy){
            tab[yy].addEventListener('click',function(){nacisnij(yy);},false);
        })(xx);
}
      
      function nacisnij(id){
          alert("nacisnij="+id);
      }

dość mocno przekombinowane
ja bym to napisał tak:

for (var xx=2;xx<=8;xx++){
        tab[xx] = document.getElementById("t"+xx);
        tab[xx].zmienna = xx;
        tab[xx].addEventListener('click', nacisnij, false);
}
      
function nacisnij(){
      alert("nacisnij="+this.zmienna);
}

szybsze, czytelniejsze i powinno zajmować mniej pamięci przez nietworzenie tylu funkcji ile elementów

1 użytkowników online, w tym zalogowanych: 0, gości: 1