Javascript forEach зацикливает только последнее значение массива

Question

Я использую создание todoApp.

Конструктор функции принимает список задач в виде массива, и я перебираю их и динамически создаю поля с помощью forEach петля. Тем не менее, он только зацикливает последнее значение этого массива.

Как я могу это исправить?

class TodoApp {
 constructor(rootApp, todoTasks) {
  this.rootApp = rootApp;
  this.todoTasks = todoTasks;
  this.todoStatus = false;
 }
 todoHandler() {
  const label = document.createElement('label');
  const radio = document.createElement('input');
  const brTag = document.createElement('br');

  if(Object.prototype.toString.call(this.todoTasks) === '[object Array]') {
   this.todoTasks.forEach((el, id) => {
    label.innerText = el;
    radio.setAttribute('type', 'radio');
    radio.value = id;
    this.rootApp.appendChild(radio);
    this.rootApp.appendChild(label);
   });
  } else {
   throw new Error('Tasks should be of type Array');
  }
 }
}

let tasks = new TodoApp(
  document.getElementById('todoLister'),
  [
   'Get Up',
   'Brush Teeth',
   'Eat Breakfast',
   'Wear Uniform',
   'Goto School'
  ]
 );
tasks.todoHandler();

<div id="todoLister">

</div>

Answer 1

Вы создаете только один лейбл, радио и <br> тег. Таким образом, каждая итерация цикла перезаписывает значения, установленные предыдущей итерацией, что означает, что сохраняются только последние значения.

Чтобы решить, просто создайте новый лейбл, радио и <br> тег внутри каждой итерации цикла:

class TodoApp {
 constructor(rootApp, todoTasks) {
  this.rootApp = rootApp;
  this.todoTasks = todoTasks;
  this.todoStatus = false;
 }
 todoHandler() {
  if(Object.prototype.toString.call(this.todoTasks) === '[object Array]') {
   this.todoTasks.forEach((el, id) => {
                            const label = document.createElement('label');
                            const radio = document.createElement('input');
                            const brTag = document.createElement('br');

       label.innerText = el;
       radio.setAttribute('type', 'radio');
       radio.value = id;
       this.rootApp.appendChild(radio);
       this.rootApp.appendChild(label);
       this.rootApp.appendChild(brTag);
   });
  } else {
   throw new Error('Tasks should be of type Array');
  }
 }
}

let tasks = new TodoApp(
  document.getElementById('todoLister'),
  [
   'Get Up',
   'Brush Teeth',
   'Eat Breakfast',
   'Wear Uniform',
   'Goto School'
  ]
 );
tasks.todoHandler();

<div id="todoLister">

</div>