I'm trying add and display user input to the DOM and its working but also displaying duplicates

Viewed 9

I want to push input to an array as an object, then display them to the DOM as list items but the function I wrote is incomplete.

addTodo is linked to a button.

let todo = [];
function addTodo(e) {
  if (e === undefined) {
   return console.log("Please enter a task you want added to the list")
  }
  let task = document.getElementById("input").value;
  let newTodo = {id: todo.length, errand: task}
  todo.push(newTodo);
  display(todo);
  todo.shift();
  console.log(todo)
  e.preventDefault();
}
/* Display() is use to iterate through any array passed in and display each value inside a list item.*/
const display = function (e) {
  e.map(function (item) {
    let li = document.createElement("li");
    let todoItem = document.createTextNode(item.errand);
    li.appendChild(todoItem);
    list.appendChild(li);
  });
};
display(todo);

The current output:

-Go to store

-Go to store

-Drop off mail

The expected output:

-Go to store

-Drop off mail

0 Answers
Related