循环使笔记应用程序中的笔记数量加倍

Question

我正在做一个小项目来记笔记。每次我单击“添加新注释”时，都会添加注释。单击第二次或多次“添加”按钮后，循环会不断添加错误数量的注释。首先是 1，然后是 3、6、10，依此类推。document.querySelector('#newNoteBtn').addEventListener('click', onNewNote);function onNewNote() { const title = document.querySelector('#noteTitle').value;const content = document.querySelector('#noteContent').value;const note = {    title: title,    content: content,    colour: '#ff1455',    pinned: false,    createDate: new Date()}notes.push(note);console.log(note);localStorage.setItem(lsNotesKey, JSON.stringify(notes));const notesFromLocalStorage = JSON.parse(localStorage.getItem(lsNotesKey));const convertedNotes = notesFromLocalStorage.map( note => {    note.createDate = new Date(note.createDate);    return note;});const notesContainer = document.querySelector('main');for (const note of convertedNotes) {    const htmlNote = document.createElement('section');    const htmlTitle = document.createElement('h1');    const htmlContent = document.createElement('p');    const htmlTime = document.createElement('time');    const htmlButton = document.createElement('button');    htmlNote.classList.add('note');    htmlTitle.innerHTML = note.title;    htmlContent.innerHTML = note.content;    htmlTime.innerHTML = note.createDate.toLocaleString();    htmlButton.innerHTML = 'remove';    htmlButton.addEventListener('click', removeNote);    htmlNote.appendChild(htmlTitle);    htmlNote.appendChild(htmlContent);    htmlNote.appendChild(htmlTime);    htmlNote.appendChild(htmlButton);    notesContainer.appendChild(htmlNote);}}

Answer 1

您只是从不清理容器，而是在每次调用时添加整组节点。解决这个问题最简单的方法是清理notesContainer：

// ...

const notesContainer = document.querySelector('main');

notesContainer.innerHTML = ''; // <-- this line cleans up your container.

for (const note of convertedNotes) {

    // ...

这不是最佳的。从性能角度来看，最好只添加新创建的注释，但这应该会突出这个问题。

Answer 2

看起来您从未清除 noteContainer 的内容：

// before the loop 

notesContainer.innerHtml = ""

祝你好运！