I want my local storage value changed, after i click the edit button, change the value of an item and then after blur it should change and be saved to the local storage. However, in the following example value in the local storage changes only if I put a string in the value, like "text", however, not the input value itself (in the local storage). I think something must be wrong with my condition (see in the blur section). Because once I do the condition inside blur's editItem, it doesn't see the e.target.value anymore (changed value on the screen), but e.target.value works perfectly outside that const editItem, and shows the one which was changed for. Please help. A part of my code
I do expect the value of a local storage object changed for e.target.value after blur event listener
todoList.addEventListener('click', (e) => {
if (e.target.dataset.button === 'delete-button') {
const arrayWithoutRemovedItem = todoLocalStorage.filter((item) => {
return item.text !== e.target.closest('.todo-item-wrapper').firstElementChild.value;
});
todoLocalStorage = arrayWithoutRemovedItem;
localStorage.setItem('todo', JSON.stringify(todoLocalStorage));
const itemWrapper = e.target.closest('.todo-item-wrapper');
itemWrapper.replaceChildren();
} else if (e.target.dataset.button === 'edit-button') {
const itemInput = e.target.closest('.todo-item-wrapper').firstElementChild;
itemInput.removeAttribute("readonly");
itemInput.focus();
itemInput.addEventListener('blur', (e) => {
const editItem = todoLocalStorage.map(object => {
if (object.text === itemInput.value) {
return {...object, text:itemInput.value};
}
return object;
});
todoLocalStorage = editItem;
localStorage.setItem('todo', JSON.stringify(todoLocalStorage));
itemInput.setAttribute("readonly", true);
});
}
});