Mvc todo list javascript

Question

help write a function so that I can edit the text and so that it will be synchronized later
everything is there except this
https://code.sololearn.com/WbLed6PVX2Cs/?ref=app

Answer 1

When I tried to run your code, a JavaScript error was thrown.
"Uncaught TypeError: Cannot set property 'innerHTML' of null
Line: 32"

Wrapping the bottom lines of your code in a DOMContentLoaded event handler like this will fix the immediate error:
document.addEventListener('DOMContentLoaded', function() {
const model = new Model();
const view = new View();
const view2 = new View2();
const controller = new Controller(model, view, view2);
});

I got the edit to work after some experimentation. The following should be all the changes needed:

Add this to the Model class:
updateTodo(id, value) {
this.todos.forEach(function(item) {
if (item.id === id)
{
item.text = value;
}
});
localStorage.setItem('list', JSON.stringify(this.todos));
}

Add this to Controller class's handleShow(event) method:
this.view2.todoList.addEventListener("click", this.handleEdit.bind(this));

Add this to Controller class:
handleEdit(event){
const li = event.target.closest("li");
const value = li.querySelector(".inputEdit").value;
const editBtn = event.target.closest(".EditBtn");
if (editBtn){
const id = editBtn.parentElement.dataset.id;
this.model.updateTodo(id,value);
this.view2.renderTodos(this.model.todos);
}
}