Событие после щелчка вместо отображения всех заметок Отображение только текущей заметки - PullRequest
Новая
       33

Событие после щелчка вместо отображения всех заметок Отображение только текущей заметки

0 голосов
/ 09 ноября 2019

Программа начинается с отображения всех заметок из localstore, но когда я нажимаю кнопку addButton, она отображает только мою текущую заметку.

Я хочу показать все заметки, и после события щелчка новая заметка будет добавлена ​​с предыдущими заметками. 

let addButton = document.querySelector(".addBtn");
let userNotes = [];
displayNotes();
//addButton Event Listner
addButton.addEventListener("click", function(e) {
    e.preventDefault();

    //get the user inputs
    let userInputs = {
        title: document.getElementById("title_input").value,
        description: document.getElementById("des_input").value
    };

    //push user inputs to arrays
    userNotes.push(userInputs);

    document.querySelector("form").reset();

    //store to the localstorage
    localStorage.setItem("Notes", JSON.stringify(userNotes));

    //display to the user
    displayNotes();
});

function displayNotes() {
    let gettingNotes = localStorage.getItem("Notes");

    let allNotes = JSON.parse(gettingNotes);
    let html = "";
    allNotes.forEach(element => {
        html += `
                    <div class="single-item">
                        <h2 class="single-item-title">
                            ${element.title}
                        </h2>
                        <p class="single-item-description">
                            ${element.description}
                        </p>
                    </div>
                `;
    });

    document.querySelector(".item-list").innerHTML = html;
}

1 Ответ

0 голосов
/ 09 ноября 2019

Это происходит потому, что вы устанавливаете userNotes как пустой массив и добавляете только свою текущую заметку. Попробуйте инициализировать userNotes значением из localStorage, т.е. 

let userNotes = JSON.parse(localStorage.getItem('Notes')) || []

Кроме того, тогда вы можете использовать переменную userNotes в функции displayNotes вместо allNotes.

...