루프에서 객체 속성이 손실되었습니다.

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

난 당신이 "나는"두 번 변수를 사용하고 있기 때문에 생각합니다. 사실, 당신은 아마 모두 내부 루프를 제거 할 수 있습니다, 그냥 할 :

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

편집 : 루프 내부에서 대신 "J"를 사용해보십시오

사실

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