ループイベントが機能しないのはなぜですか？

Question

ノードの共有オブジェクトをhrefクリックイベントごとにトリガーするように設定しようとしていますが、何らかの理由で最初のものだけが動作しています。私は間違って何をしていますか？

for (let i = 0; i < files.length; i++) { 
    file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${files[i]}</a>`; 
    document.getElementById('file' + i).onclick = (function (i) { 
     require('electron').remote.getGlobal('sharedObject').filename = files[i].replace('.tnb',''); 
     window.location = "login.html"; 
    })(i); 
    } 

Answer 1

onclick割り当ては、関数を実行し、その後onclickに、この実行結果を返す関数を受け入れますが、どのようなコードがやっていることは（すぐに）である必要があります。

スコープをブロックしているletを、使用しているので、生命維持を使用する必要はありません、あなただけのハンドラとしての機能を返すことができなく、それを実行します。

for (let i = 0; i < files.length; i++) { 
    file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${files[i]}</a>`; 
    document.getElementById('file' + i).onclick = function() { // <-- return the click handler for each element 
    require('electron').remote.getGlobal('sharedObject').filename = files[i].replace('.tnb',''); 
    window.location = "login.html"; 
    }; 
} 

にオリオン座ゼータ星によって示唆されるようにforEachを使用したコメントは、別のスコープを作成し、生命維持のための必要性を排除するであろう：

files.forEach(function (file, i) { 
    file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${file}</a>`; 
    document.getElementById('file' + i).onclick = function() { 
    require('electron').remote.getGlobal('sharedObject').filename = file.replace('.tnb',''); 
    window.location = "login.html"; 
    }; 
}); 

Answer 2

あなたは配列に対する非同期コールバックを結合している場合、それは.forEach使用する方がはるかに簡単です：

を210

files.forEach((file, i) => { 
    file_container.innerHTML = file_container.innerHTML + `<a id="file${i}" href="#" class="list-group-item">${file}</a>`; 
    document.getElementById('file' + i).onclick =() => { 
     require('electron').remote.getGlobal('sharedObject').filename = file.replace('.tnb',''); 
     window.location = "login.html"; 
    }); 
});