Почему дублируется вывод массива?

Question

[uRoot]

Пытаюсь постигнуть JS. Набросал очень простенький todo list, но почему-то при добавлении в localStorage с последующим выводом в HTML, массив значений дублируется, но при этом добавляется/выводится и новое значение. Если обновить страницу, то повторы исчезнут. В localStorage дублей нет, т.е. это ошибка при выводе.
Код:
Не подскажите что не так? А то чувство, что я в корне делаю что-то не так не покидает меня.

Answer 1

[0xD34F]

Потому что вы дополняете уже существующую разметку, при том, что обрабатываете каждый раз все элементы массива. Разметку надо перезаписывать:

document.querySelector('#out').innerHTML = todoList
  .map(n => `<p>${n}</p>`)
  .join('');

Comments

[uRoot]

Это сработало. Спасибо. Какие есть ещё варианты решения, кроме уже упомянутого Antony Tkachenko - очищать контейнер.

Я просто ещё не умею работать со стрелочными функциями, поэтому такое решение не рассматривал, несмотря на то, что среда разработки предлагала.

[0xD34F]

Стрелочная функция или нет - в данном случае значения не имеет. Можете заменить на обычную.

А что до "не умею" - ну так научитесь, это не сложно.

[uRoot]

0xD34F, круто, спасибо

Answer 2

[Antony Tkachenko]

document.getElementById('out').innerHTML = '';

Очищайте контейнер в начале ф-ции out, либо передавайте в функцию вывода только новые элементы.

Comments

[uRoot]

Очищайте контейнер в начале ф-ции out

Спасибо. Нужно будет попробовать.