Javascriptを使用してください。混乱

Question

私が最初のブロックでこのコード

var box = document.getElementsByClassName('box-value'); 
 

 
for(let i = 0; i < box.length; i++){ 
 
    box[i].onclick = function(){ 
 
     console.log(i); 
 
    } 
 
    console.log("End loop. i:" + i); 
 
} 
 

 
let i = 0; 
 
box[i].onclick = function(){ 
 
    console.log(i); 
 
} 
 
i = 9; 
 

 
box[0].onclick();

については本当に混乱しています、私は0

であるが、第2のブロックで、私は9です。

なぜ私は本当に理解できないのですか？

Answer 1

あなたの最初のiがブロックとdoesn't get changed afterwardsにあるので、しばらくあなたの二iとクリックハンドラが実行される前に9に設定を取得ん（ないブロックです）。あなたは

{ 
    let i = 0; // one variable that stays constant 
    box[i].onclick = function(){ 
     console.log(i); 
    }; 
} 
let i = 9; // a different variable 

を行うことにより、ループから動作をエミュレートすることができますし、また、ループの周りの範囲を置くことによって、割り当ての変更の動作をエミュレートすることができます

let i = 0; 
for(; i < box.length; i++) { 
    box[i].onclick = function() { 
     console.log(i); 
    }; 
    console.log("End loop. i:" + i); 
} 

Answer 2

でletと宣言しiforループが終了した後にループが存在しません。二iは独立しており、あなたは二iの値が9

let statement documentation