對象屬性在循環中丟失

Question

我第一次使用本地存儲並在線瀏覽一些JS教程，因爲我很生鏽。製作一本字典，你可以在2個成語中添加單詞，然後顯示。除了對象「dict」中的第二項之外，一切工作正常，雖然它在對象中，但並未顯示。它顯示在控制檯輸出中。可能是循環中的索引。雖然看不到它。任何燈光棚將不勝感激。

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」 的兩倍。在內部進行循環，嘗試使用「J」而不是：

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); 
    } 
}