Html - Todo list using array and loop

SamSandy
July 19, 2024
150 views
0 votes
2 Answers

I want to create a todo list using array and loop and display the list in div container. I am able to display the list but it is muliplying the same list stored and is displayed.

<body>
    <p class="title"> Todo List </p>
    <input type="text" class="js-input-todo" placeholder="Todo name">
    <button type="submit" class="js-btn-todo" onclick="handleAddTodo()">Add</button>

    <div class="todo-list"></div>

 <script src="script/11-arrays-loop.js"></script>
</body>

//script 

let names = []

let todoListHTML = ''

function handleAddTodo(){
  const todo_input = document.querySelector('.js-input-todo');
  const todoValue = todo_input.value
  const result = document.querySelector('.todo-list');
 
  names.push(todoValue);
  for(let i = 0; i <  names.length ; i++){
   let todoName = names[i]
   const html = `<p>${todoName} </p>`
   todoListHTML = html;
   result.innerHTML +=todoListHTML;
   
   todo_input.value = '';
  }
  
  

}

I want to the array value to not repeat and displayed in the output

Answers

Try This

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <script>
        let names = [];
        let todoListHTML = ''

function handleAddTodo(){
  const todo_input = document.querySelector('.js-input-todo').value;
  const todoValue = todo_input.value
  const result = document.querySelector('.todo-list');
 
  names.push(todoValue); 
   const html = `<p>${todo_input} </p>`
   todoListHTML = html;
  result.innerHTML +=todoListHTML;
  todo_input.value = '';
}
</script>

<body>
    <p class="title"> Todo List </p>
    <input type="text" class="js-input-todo" placeholder="Todo name">
    <button type="submit" class="js-btn-todo" onclick="handleAddTodo()">Add</button>

    <div class="todo-list"></div>

 </body>
</html>

    const names = [];
    const result = document.querySelector(".todo-list");
    const todo_input = document.querySelector(".js-input-todo");
    function handleAddTodo() {
      const todoValue = todo_input.value;
      const html = document.createElement("p");
      html.innerHTML = todoValue;
      result.append(html);
      names.push(todoValue);
      todo_input.value = "";
      console.log(names, "names");
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Todo list using array and loop

Answers