Witam! Tworzę To-Do listę i próbowałem nadać itemom z listy taką funkcjonalność, że po doubleclicku można je edytować. Po czym po wciśnięciu entera lub straceniu przez item focusu zmiany mają się zapisywać.
Wszystko działa tak jak powinno, jednakże w consoli pokazuje mi błąd. Próbując znaleźć coś w google, dowiedziałem się że chyba chodzi o ukryte wydarzenie onblur które odbywa się podczas usuwania elementu, ale nie potrafię tego jednak jakoś rozgryźć, zrozumieć? Wrzucam kawałek kodu:
// target items created dynamically and add editability to items
ul.addEventListener('dblclick', (event) => {
const clickedItem = event.target;
const clickedElementJob = clickedItem.dataset.job;
const value = clickedItem.textContent;
if (clickedElementJob == 'edit'){
clickedItem.outerHTML = `<input class="text " data-job="edit" value='${value}'></input>`;
}
});
// target items created dynamically and check if they are input fields, if so get the value when enter pressed
ul.addEventListener('keypress', function pressEnter(event){
if (event.keyCode == 13){
saveChanges(event);
}
});
// target items created dynamically and check if they are input fields, if so get the value when loose focus
ul.addEventListener('focusout', function looseFocus(event){
saveChanges(event);
});
function saveChanges(event){
const clickedItem = event.target;
if (clickedItem.hasAttribute('value')){
const newInput = document.querySelector('[value]');
const listItem = list[clickedItem.previousElementSibling.id];
clickedItem.outerHTML = `<p class="text " data-job="edit">${newInput.value}</p>`;
listItem.name = newInput.value;
}
localStorage.setItem('items', JSON.stringify(list));
};