Почему в TODO удаляется сразу по 2 элемента?

Question

[Johnny_K88]

Решил написать ToDo List. Возникает ошибка при удалении элементов из массива, отсюда программа, как мне кажется, криво перерисовывает элементы задачи. Получается, что удаляет то два элемента за одно нажатие, то дублирует добавление... Что не так?

ссылка на файлы

https://github.com/Ykalinovskyi/JavaScript.git

Answer 1

[Сергей Соколов]

в рендере во время обхода массива при каком-то текущем значении index
удаляете этот же элемент в deleteEl()
После удаления, выходит, index уже указывает на следующий элемент и не отрисовывает его.

TL&DR не изменять массив изнутри forEach()

Ну и вообще, render() не место для изменения данных. Пусть каждый занимается своим делом: render() только рисует что есть. delete() только удаляет элемент из массива (и вызывает render())

Comments

[Johnny_K88]

спасибо за совет! Сейчас буду разбираться

[Сергей Соколов]

Johnny_K88, вот минимальный пример, иллюстрирующий проблему:

[0,1,2,3,4].forEach((value, index, arr) => {
  if (index === 2) {
    arr.splice(index, 1);
  } else {
    console.log(value);
  }
})

// выведет 0, 1, 4

[Johnny_K88]

Сергей Соколов, Разобрался! Получилось! Теперь работает так как задумывал. Спасибо Вам огромное за подсказку, что каждая функция должна отвечать за свое действие ( отрисовывать, удалять и т.д.)
Выложил на гитхабе новый файл todo.js буду рад если посмотрите и раскритикуете