CODEWITHSUNDEEP
javascript
ab2016 d
ab2016 d

Reputation: 33

how to add new li to ul and removing the older ones

I need to take the user input and append it into the list element and remove one of the older list items with each new list item input. 

const addToDoBtn = getElementById('btn-addTodo');

const changeAddToDoF = () => {

  var ul = document.getElementById('todoList').removeAttribute;
  var todoInput = document.getElementById('todoInput').value,
    listNode = document.getElementById('todoList'),
    liNode = document.createElement('LI'),
    textNode = document.createTextNode(todoInput);

  liNode.appendChild(textNode);
  listNode.appendChild(liNode);
}
addToDoBtn.addEventListener("click", () => changeAddToDoF());
<div>
  <h3>Todos:</h3>
  <ul id="todoList">
    <li>Hack the future</li>
    <li>Learn javascript</li>
    <li>Take over the world</li>
  </ul>
  <input type="text" id="todoInput" />
  <button id="btn-addTodo">Add todo</button>
</div>

but nothing happen at all

Upvotes: 0

Views: 238

Answers (2)

Avanthika
Avanthika

Reputation: 4182

This solution removes the oldest todo and appends new to-do to the bottom of the list. I've modified your solution accordingly.

Hope this is helpful.

(function() {
   const addToDoBtn = document.getElementById('btn-addTodo');

const changeAddToDoF = () => {
  var todoInput = document.getElementById('todoInput').value,
  listNode = document.getElementById('todoList'),
  liNode = document.createElement('li'),
  textNode = document.createTextNode(todoInput);
  liNode.appendChild(textNode);
  
  //Removes old item from the list
  listNode.removeChild(listNode.getElementsByTagName('li')[0]);
  // appends the new item to the list
  listNode.appendChild(liNode);
}

addToDoBtn.addEventListener("click", () => changeAddToDoF());
})();
<div>
  <h3>Todos:</h3>
  <ul id="todoList">
    <li>Hack the future</li>
    <li>Learn javascript</li>
    <li>Take over the world</li>
  </ul>
  <input type="text" id="todoInput" />
  <button id="btn-addTodo">Add todo</button>
</div>

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26370

Open your console (F12 in Chrome). It tells you what the problem is : Uncaught ReferenceError: getElementById is not defined. It should be document.getElementById like everywhere else in your code. Line 1 fixed, then here are some code optimisation suggestions (cache DOM elements) and bugfixes :

const addToDoBtn = document.getElementById('btn-addTodo'),
      ul = document.getElementById('todoList'),
      todoInput = document.getElementById('todoInput');
      
      

const changeAddToDoF = () => {

  const liNode = document.createElement('li'),
    textNode = document.createTextNode(todoInput.value);

  liNode.appendChild(textNode);
  ul.appendChild(liNode);
  
  todoInput.value= "";
}

addToDoBtn.addEventListener("click", changeAddToDoF);
<div>
  <h3>Todos:</h3>
  <ul id="todoList">
    <li>Hack the future</li>
    <li>Learn javascript</li>
    <li>Take over the world</li>
  </ul>
  <input type="text" id="todoInput" />
  <button id="btn-addTodo">Add todo</button>
</div>

Upvotes: 0

Related Questions