ループ上のaddEventListenerがIIFEで動作しない

Question

以下のコードでは、jの値は常に最後の反復に設定されています。私は既にIIFEを使用していますが、それでも予期しない動作をします。私が間違っていることがありますか？

(function(j) { 
    deleteButton.addEventListener('click',function() { 
      console.log(j); // j is the parameter 
    }); 
})(j); 

それともかなりのコメントに気づい@torazaburoとして、あなたはletキーワードを使用することができます：あなたが閉鎖して何をしたいか

function renderUsers(users) { 
    const frag = document.createDocumentFragment(); 
    const userList = document.getElementById('user-list'); 

    // Create and append all the users on the user list 
    for (var j = 0; j < users.length; j++) { 
     var item = document.createElement('li'); 
     var division = document.createElement('div'); 
     var userName = document.createElement('span'); 
     var deleteButtonAnchor = document.createElement('a'); 
     var deleteButton = document.createElement('i'); 
     deleteButton.classList.add('material-icons'); 
     deleteButton.textContent = 'delete_forever'; 
     (function() { 
      deleteButton.addEventListener('click',function() { 
       console.log(j); 
      }); 
     })(); 
     deleteButtonAnchor.appendChild(deleteButton); 
     division.appendChild(userName); 
     division.appendChild(deleteButtonAnchor); 
     item.appendChild(division); 


     userName.appendChild(document.createTextNode(users[j].name.first+' '+users[j].name.last)); 
     frag.appendChild(item); 
    } 
    userList.appendChild(frag); 
} 

Answer 1

は、のような、パラメータとして反復変数を渡すことですクロージャを作成する必要性を排除するために変数を反復するためです。 letキーワードの詳細はhereです。ただし、古いブラウザでは実装されていないES6機能であるため、最初にトランスバイルする必要があります（たとえば、babelを使用するなど）。