Я вижу две проблемы.
Когда вы генерируете HTML для заметок здесь:
notes.forEach(function(note) {
noteList.innerHTML += `<li><a id="note" data-id=${note.id} class="menu-item">${note.title}</a></li>`
})
Вы присваиваете каждой заметке один и тот же идентификатор (id="note")и затем позже, пытаясь установить innerText элемента с id="note", но он всегда получит первую заметку с идентификатором заметки.Ваш код выглядит следующим образом:
const singleNote = document.querySelector('#note');
singleNote.innerText = editTitleInput.innerText;
Поэтому, чтобы решить эту проблему, я предлагаю вам объединить идентификатор заметки с идентификатором элемента при генерации HTML (чтобы каждый из них имел уникальный идентификатор) следующим образом:
notes.forEach(function(note) {
noteList.innerHTML += `<li><a id="note${note.id}" data-id=${note.id} class="menu-item">${note.title}</a></li>`
})
И затем получите соответствующий элемент со следующим запросом.
let singleNote = document.querySelector(`#note${noteId}`);
Вторая часть проблемы, которую я вижу, заключается в том, что вы добавляете eventListener в noteDetail, внутри кода слушателя события clickсписка заметок следующим образом:
noteList.addEventListener('click', function(event) {
...
noteDetail.addEventListener('click', function(event) {
....
})
})
Это означает, что при каждом нажатии на NoteList вы добавляете прослушиватель событий в noteDetail (что вы уже сделали).Поэтому при нажатии на noteDetail код будет выполняться несколько раз вместо одного.
Поэтому, чтобы решить эту проблему, я предлагаю вам поместить прослушиватель события click noteDetail вне прослушивателя события click noteList.
Вотмой полный код JS.Я прокомментировал части, которые я изменил.Надеюсь, это поможет:)
const noteContainer = document.querySelector(".column is-one-quarter")
const noteList = document.querySelector(".menu-list")
fetch('http://localhost:3000/api/v1/notes')
.then(function(response) {
return response.json();
})
.then(function(notes) {
//I changed the variable to "notes" instead of "note" as we're getting all notes here.
notes.forEach(function(note) {
//give a unique id to each note.
noteList.innerHTML += `<li><a id="note${note.id}" data-id=${note.id} class="menu-item">${note.title}</a></li>`
})
})
// display details of each note
const noteDetail = document.querySelector(".note-detail");
noteList.addEventListener('click', function(event) {
if (event.target.className === "menu-item") {
fetch(`http://localhost:3000/api/v1/notes/${event.target.dataset.id}`)
.then(function(response) {
return response.json()
})
.then(function(note) {
noteDetail.innerHTML = `<h1 contenteditable="true" id="title" data-id=${note.id} class="subtitle is-2">${note.title}</h1><p contenteditable="true" id="body" data-id=${note.id} class="subtitle is-6">${note.body}</p><a id="save" class="button is-small">Save</a>`
//I removed the noteDetail event listener from here
})
}
})
//Add the noteDetail event listener here (i.e outside of the noteList addEventListener code).
noteDetail.addEventListener('click', function(event){
if (event.target.id === "save") {
//Now get the noteId of the current note being edited.
//We know this exists in both the data-id of the title and the body of noteDetail HTML
//so we retrieve it from one of these.
//We could have also added a data-id to the save button of the noteDetail html.
//and then retrieved the noteId here with event.target.dataset.id
let noteId = document.querySelector('#title').dataset.id;
let editTitleInput = document.querySelector(`h1[data-id="${noteId}"]`);
let editBodyInput = document.querySelector(`p[data-id="${noteId}"]`);
//get the singleNote by it's unique id.
let singleNote = document.querySelector(`#note${noteId}`);
fetch(`http://localhost:3000/api/v1/notes/${noteId}`, {
method: "PATCH",
headers: {
'Content-Type': 'application/json',
'Accepts': 'application/json'
},
body: JSON.stringify({
title: editTitleInput.innerText,
body: editBodyInput.innerText
})
}).then(function(response) {
return response.json()
}).then(function(note) {
singleNote.innerText = editTitleInput.innerText;
})
}
})