Не в состоянии редактировать текст внутри массива динамически, который хранится в LocalStorage ⇐ Javascript

[Anonymous]

Notes App









New Note

Create Note
Close

Edit Note

Edit Note
Close





* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
background-color: #8c53ff;
height: 94vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
height: 600px;
width: 890px;
background-color: white;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
}
.add {
width: 237px;
height: 241px;
border: 1px solid #ddd;
background-color: #f9f9f9;
margin-left: 4%;
margin-top: 3%;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
color: gainsboro;
}
.add:hover {
background-color: #f1f1f1;
}
.create-note {
width: 441px;
height: 316px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
border-radius: 10px;
position: absolute;
top: 22%;
left: 34%;
display: none;
}
.heading {
margin-top: 16px;
font-size: 32px;
}

textarea {
border: 2px solid #8c53ff;
border-radius: 10px;
width: 300px;
height: 144px;
margin-left: 5%;
margin-top: 12px;
padding: 10px;
}
.create-btn {
width: 100px;
height: 36px;
margin-top: 18px;
margin-left: 15px;
background-color: #8c53ff;
color: white;
}
.close-btn {
width: 100px;
height: 36px;
background-color: gainsboro;
color: white;
margin-left: 10px;
}
.create-btn,.close-btn {
border: none;
border-radius: 14px;
font-size: 14px;
}
.note {
background-color: #fff385;
height: 240px;
width: 240px;
margin: 25px;
border-radius: 10px;
overflow-y: auto;
display: none;
}
.inner-note {
height: 190px;
width: 190px;
overflow-y: auto;
margin-left: 32px;
margin-top: 26px;
word-break: break-all;
word-spacing: 2px;
}
.fa-solid.fa-edit {
padding-left: 94px;
}
.fa-solid.fa-trash {
padding-left: 30px;
}
.edit-note {
width: 441px;
height: 316px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
border-radius: 10px;
position: absolute;
top: 22%;
left: 34%;
display: none;
}
.edit-btn {
width: 100px;
height: 36px;
margin-top: 18px;
margin-left: 15px;
background-color: #8c53ff;
color: white;
border: none;
border-radius: 14px;
font-size: 14px;
}
.close-btn2 {
width: 100px;
height: 36px;
background-color: gainsboro;
color: white;
margin-left: 10px;
border: none;
border-radius: 14px;
font-size: 14px;
}
@media only screen and (max-width: 600px) {
.container {
width: 375px;
display: block;
}
.add {
margin-left: 20%;
}
.create-note {
left: 0%;
width: 374px;
}
.note {
margin-left: 70px;
overflow-y: clip;
}
.inner-note {
padding-top: 20px;
}
.fa-solid.fa-edit {
padding-top: 10px;
}
}

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
// let note = document.querySelector('.note');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');
add_btn.addEventListener('click', () => {
textArea.value = '';
createNote.style.display = 'block';
})
close.addEventListener('click', () => {
createNote.style.display = 'none';
})
create.addEventListener('click', () => {
let note = document.createElement('div');
note.className = 'note';
let innerNote = document.createElement('div');
innerNote.className = 'inner-note';
text = textArea.value;
innerNote.textContent = text;
let edit = document.createElement('i');
edit.className = 'fa-solid fa-edit';
let del = document.createElement('i');
del.className = 'fa-solid fa-trash';
if (!textArea.value){
return;
}
else {
note.appendChild(innerNote);
note.appendChild(edit);
note.appendChild(del);
container.appendChild(note);
createNote.style.display = 'none';
note.style.display = 'block';
edit.addEventListener('click', () => {
textArea2.value = text;
editNote.style.display = 'block';
})
editBtn.addEventListener('click', () => {
innerNote.textContent = textArea2.value;
editNote.style.display = 'none';
})
del.addEventListener('click', () => {
container.removeChild(note);
})
// onLoad();
let notesArr = [];
let innerNote1 = document.querySelectorAll('.inner-note');
innerNote1.forEach((val) => {
if (val.textContent) {
notesArr.push(val.textContent);
}
else {
return;
}
});
console.log(notesArr);
localStorage.setItem('notes',JSON.stringify(notesArr));
JSON.parse(localStorage.getItem('notes'));
}
});

closeBtn.addEventListener('click', () => {
editNote.style.display = 'none';
})
const onLoad = function () {
let notesArr = JSON.parse(localStorage.getItem('notes'));
console.log(notesArr);
notesArr.forEach((val) => {
let note = document.createElement('div');
note.className = 'note';
let innerNote = document.createElement('div');
innerNote.className = 'inner-note';
let edit = document.createElement('i');
edit.className = 'fa-solid fa-edit';
let del = document.createElement('i');
del.className = 'fa-solid fa-trash';
innerNote.textContent = val;
note.appendChild(innerNote);
note.appendChild(edit);
note.appendChild(del);
note.style.display = 'block';
container.appendChild(note);
edit.addEventListener('click', () => {
val = textArea2.value;
innerNote.textContent = val;
editNote.style.display = 'block';
})
editBtn.addEventListener('click', () => {
innerNote.textContent = textArea2.value;
editNote.style.display = 'none';
})
del.addEventListener('click', () => {
container.removeChild(note);
})
})
}

window.onload = onLoad;
< /code>
Я пытаюсь сделать приложение Notes с функциональностью Delete и Edit, когда я редактирую примечание, локальное хранилище не сохраняет отредактированную заметку, оно сохраняет предыдущую ноту и аналогичные вещи случаются, когда я удаляю его. Как я редактирую данные внутри локального массива после динамического редактирования элемента HTML. Могу ли я получить доступ к конкретному элементу HTML, который является частью Nodelist (Innernote)

Подробнее здесь: https://stackoverflow.com/questions/794 ... calstorage