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

Question

[uRoot]

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

Answer 1

[0xD34F]

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

Замените

todoList.forEach(function(element) {
  document.getElementById('out').innerHTML += '<p>'+element+'</p>';
});

на

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

Comments

[uRoot]

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

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

[0xD34F]

В данном случае неважно, стрелочная функция или нет. Вот, то же самое:

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

[uRoot]

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

Answer 2

[Antony Tkachenko]

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

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

Comments

[uRoot]

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

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