Mvc todo list javascript | SoloLearn: Learn to code for FREE!

+1

Mvc todo list javascript

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

8/26/2020 7:14:59 AM

FishMan FishMAn

1 Answer

New 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); } }