educative.io

TodoList Exercise

Courses
,
#1

My Todo list solution is working as per the requirement but, getting error messages any Idea.

var addTodo = function(){
  //get ul 
  var ul = document.querySelector('#todoList');

  //create dynamic li
    var li = document.createElement('li');
  //create id for each li
      //li.setAttribute('id',item.value);

  //create textNode with input value and append it to li
    var input = document.querySelector('#todo');
     var itemValue = document.createTextNode(input.value);
  if(input.value !== ''){
     //append textNode into li
    input.value = "";

     li.appendChild(itemValue);
   
    ul.appendChild(li);
    
     }else {
            li.appendChild('');

   }
  
}

  var button = document.getElementById('addTodo');
button.addEventListener('click', addTodo);
#2

Hi Mesfin_Tegegne ,

This is Alina from Educative. Thank you for reaching out to us and giving your feedback.

You are fetching an element of id “addTodo” while the id of the button is “add”. So changing
var button = document.getElementById('addTodo');
to
var button = document.getElementById('add');
will fix the error messages.

Hope this helps! Again, thank you for your valuable feedback! If you have any further concerns/questions/comments, please let us know. Good luck with solving the rest of the exercise. Let us know if you need help!

Best Regards,

Alina Fatima | Developer Advocate

#3

Hi @Alina_Fatima, I use your solution in @Mesfin_Tegegne code but it gives mistake too. I do not see in the HTML given any id = “add”. Please verify.
I wish to ask about my code and the same as in case of @Mesfin_Tegegne I do not see why the first task of the test is not passed? My code works, no list item is added when there is no input in the form. Please reply.

var addTo = document.getElementById(“todo”);
var button = document.getElementById(“addTodo”);
button.onclick = function(){
if(addTo.value !== “”){
var newLi = document.createElement(“li”);
newLi.innerHTML = addTo.value;
var addNewLi = document.getElementById(“todoList”);
addNewLi.appendChild(newLi);
addTo.value = “”;
}
}

#4

Hi @Camil,

There is a button with id = "add" on line 12 of the HTML file here.

You need to get the button correctly using the correct id: add. Furthermore, once you have checked that the value is not empty, you should use the createTodo function you created in the earlier exercise.

Best Regards,
Zuwayr | Developer Advocate
educative.io