window.onload = function() { const addBtn = document.querySelector('.add'); const list = document.getElementById('list'); let todos = []; const todosArr = (name, status) => { let todo = {}; todo.name = name; todo.status = status; todos.push(todo); console.log(todo); }; let getTodos = () => { if(localStorage.getItem('todos')) { todos = JSON.parse(localStorage.getItem('todos')); } }; const setTodos = () => { localStorage.setItem('todos', JSON.stringify(todos)); }; getTodos(); document.body.addEventListener('click', (el) => { if(el.target.nodeName === "LI") { el.target.classList.toggle('checked'); el.target.setAttribute('status', true); console.log(el.target); setTodos(); } else if(el.target.className === "trash") { let parent = el.target.parentNode; parent.remove(); setTodos(); } }); const newLiToTodo = () => { let li = document.createElement('li'); let name = document.querySelector('.in').value; let date = document.querySelector('.date').value; let inputInfo = `${name} ${date}`; let textN = document.createTextNode(inputInfo); li.setAttribute('status', false); const dellBtn = document.createElement('button'); const dellTxt = document.createTextNode('Dell'); dellBtn.className = 'trash'; dellBtn.appendChild(dellTxt); li.appendChild(textN); li.appendChild(dellBtn); if(!name || !date) { alert('Введите необходимые данные'); } else { list.insertBefore(li, list.childNodes[0]); document.querySelector('.in').value = ''; document.querySelector('.date').value = ''; } todosArr(inputInfo, li.getAttribute('status')); }; addBtn.onclick = () => { newLiToTodo(); setTodos(); }; }
  • 2
    "does not work to the end" - but how long does it work? +1 for the consistent spelling of the word "in advance." - Igor
  • localStorage is saved but not displayed. When reloading, the pages are saved in the array in localStorage, but not displayed in the list itself. The same applies to the delete button and the crossing of completed cases. Confused already and I do not understand what is wrong. Thank you!) - AlexGorol
  • You did not show (didn’t write?) The code that uses / shows the elements of the loaded todos array at the time of loading the page - after calling getTodos(); . - Igor
  • Not written, it means. And could you tell me how to do this? - AlexGorol

1 answer 1

You did not show (didn’t write?) The code that uses the elements of the loaded todos array to create DOM elements during the page load - after calling getTodos(); :

 ... getTodos(); function todoToDOM(item) { let li = document.createElement('li'); // и так далее ... }; todos.forEach(item => todoToDOM(item)); ...
  • Thanks !!! Have a nice day) and mood! - AlexGorol
  • @AlexGorol On health. To the left of the answer is the tick mark. - Igor
  • Can I ask you another question about this code? This concerns the deletion of data from the repository - AlexGorol
  • @AlexGorol Ask for sure. But I have now - morning, I will not answer immediately. - Igor
  • thanks a lot! - AlexGorol