Мой список массивов продолжает выводить тот же элемент списка, если я нажимаю кнопку добавления с пустым вводом

Question

Так вот мой вопрос.У меня есть этот массив todolist, который работает, но проблема в том, что он продолжает повторять один и тот же вывод, если я нажимаю кнопку с пустым выводом.Я добавил, и если заявление, чтобы предотвратить это, но, похоже, ничего не делает.Я думаю, моя проблема в функции displayItems, но я не знаю, где.Это мой код:

HTML:

<h2>Add an item to the list</h2>
<input type="text" id="addItemInput"><button class="addButton" onclick="events.addItem();">Add an item</button>
<ul id="todoList">

</ul>

JavaScript

Раздел управления, чтобы добавить элемент в список и отобразить его

var todoListArray = {
  todoList : [],
  addItems : function(todoItem){
    if(todoItem != ""){
       this.todoList.push({
           todoItem : todoItem 
      });
    }else{
      todoItem = "";
    }
  },
  displayItems : function(){
        var listParent = document.getElementById('todoList');

    for(var i=0;i<this.todoList.length;i++){
            var listItem = document.createElement('li');
            listItem.innerHTML = this.todoList[i].todoItem;
      listParent.appendChild(listItem);
    }
  }
};

// View Section to show and get items

var events = {
  addItem : function(){
    var itemInputValue = document.getElementById("addItemInput");
    todoListArray.addItems(itemInputValue.value);
    todoListArray.displayItems();
    itemInputValue.value = "";
  }
};

Заранее спасибо.

Answer 1

В displayItems вы перебираете весь список с самого начала и добавляете каждый элемент.Следовательно, когда вы запускаете displayItems 2-й, 3-й, ... раз, когда вы добавляете весь список.

Вы должны либо (а) отслеживать последний элемент, который вы уже отобразили, либо(b) полностью удалить отображаемый список li перед повторением итераций todoList.

var todoListArray = {
  lastIndex : 0, // last todoList index we have displayed
  ...
  displayItems : function(){
    var listParent = document.getElementById('todoList');

    // start with i=this.lastIndex to pick up where we left off
    for(var i=this.lastIndex; i<this.todoList.length; i++){
      var listItem = document.createElement('li');
      listItem.innerHTML = this.todoList[i].todoItem;
      listParent.appendChild(listItem);
      this.lastIndex++; // increment the last index once it is displayed
    }
  }
};