在eventListener中創建全局變量whitin相同的「for」

Question

var buttons = document.querySelectorAll('button'); 
    var span = document.querySelectorAll('.counter'); 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', function (event) { 
     span[i].innerText = parseInt(span[i].innerText) +1; 
    }); 
} 

內部跨度不會「看到」我用於按鈕的相同[i]。控制檯返回「未定義」任何關於如何解決該問題的建議？

Answer 1

這是因爲您的事件處理程序（button上的click）會稍後運行，而那個時間i是別的。您應該使用封閉保持它內部：

var buttons = document.querySelectorAll('button'); 
 
var span = document.querySelectorAll('.counter'); 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', (function (i) { 
 
     return function (event) { 
 
      span[i].innerText = parseInt(span[i].innerText || 0) + 1; 
 
     }; 
 
    }(i))); 
 
}

<button>A</button> 
 
<span class="counter"></span> 
 

 
<button>B</button> 
 
<span class="counter"></span> 
 

 
<button>C</button> 
 
<span class="counter"></span>