ループ内でオブジェクトのプロパティが失われました

Question

初めてローカルストレージで作業していて、私はかなり錆びているので、JSチュートリアルをオンラインで行っています。 2つのイディオムで単語を追加できる辞書を作って表示します。オブジェクト "dict"の2番目の項目を除いてすべてが正常に動作していますが、オブジェクト内には表示されません。コンソール出力に表示されます。ループのインデックスになるかもしれません。しかし、それを見ることはできません。どんな光が当てられますか？

function getDictionary(){ 
    var dict = {}, 
     dictStr = localStorage.getItem('dictionary'); 

     if(dictStr !== null){ 
      dict = JSON.parse(dictStr); 
    } 


    return dict; 

} 


function show(){ 
    var html = ""; 
    var resultOutput = document.getElementById("resultOutput"); 
    var dict = getDictionary(); 
    for(var i = 0; i < Object.keys(dict).length; i++){ 
     key = Object.keys(dict)[i]; 
     html += "<p class='normal-paragraph'>The english word <span style='color: green'> " + key + 
      " </span>in portuguese is <span style='color: green'> " + dict[key]+ 
      "</span> <button class='removeBtn' id='"+ i +"' >x</button></p>"; 

     resultOutput.innerHTML = html; 


     var buttons = document.getElementsByClassName('removeBtn'); 
     for(var i = 0; i < buttons.length; i++){ 
      buttons[i].addEventListener('click',remove); 
    } 



} 

    console.log(""); 
    console.log("All words: "+ JSON.stringify(dict)); 


} 

HTML ...

<p id="sayHello"></p> 

<fieldset id="translateField"> 
    <legend> Translate english to Portuguese</legend> 
      <input type="text" id="newWordEng" name="newWordEng" value="" placeholder=" write the english word" > 
      <input type="text" id="newWordPt" name="newWordPt" value="" placeholder=" write the portuguese word"> 
      <input type="button" id="addWordBtn" name="addWordBtn" value="Add New Word"> 
     </form> 

</fieldset> 

<div id="resultOutput"> 
</div> 


<script src="src/translate.js"></script> 
</body> 

Answer 1

私は、あなたが "i" が二度変数を使用しているからだと思います。

for(var j = 0; j < buttons.length; j++){ 
     buttons[j].addEventListener('click',remove); 
} 

編集：実際には、あなたはおそらく完全に内部ループを削除し、ちょうど行うことができます。実際には

function show(){ 
    var html = ""; 
    var resultOutput = document.getElementById("resultOutput"); 
    var dict = getDictionary(); 
    for(var i = 0; i < Object.keys(dict).length; i++){ 
     key = Object.keys(dict)[i]; 
     html += "<p class='normal-paragraph'>The english word <span style='color: green'> " + key + 
       " </span>in portuguese is <span style='color: green'> " + dict[key]+ 
       "</span> <button class='removeBtn' id='"+ i +"' >x</button></p>"; 

     resultOutput.innerHTML = html; 

     var buttons = document.getElementsByClassName('removeBtn'); 
     buttons[i].addEventListener('click',remove); 
    } 
}