Блог

Я впервые работаю с локальным хранилищем и просматриваю некоторые учебные пособия по 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>
  

Я думаю, это потому, что вы дважды используете переменную «i». Во внутреннем цикле for попробуйте вместо этого использовать «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);
    }
}