Use "add event listeners" to add new li to ul

Hello,
please see my code below for reference. In this code, i am trying to add the value that is entered in the text field to the ul items.

I have successfully written javscript code with out errors but my code isnt working

please help me

thanks

Just a few things in your event handler

function add(event) {  // pass the event object to your function
  event.preventDefault();  // stop default reload on form submit
  var txtval = document.getElementById("task").value;  // value not Value :)
  console.log(txtval)
  var listNode = document.getElementsByClassName("collection");
  var liNode = document.createElement("li");
  liNode.className = "collection-item";
  var txtNode = document.createTextNode(txtval);

  liNode.appendChild(txtNode);

  const link = document.createElement("a");
  link.className = "delete-item secondary-content";
  liNode.setAttribute("href", "#");
  link.innerHTML = '<i class = "fa fa-remove"></i>';

  liNode.appendChild(link);
  //  listNode.appendChild(liNode);

  document.querySelector("ul.collection").appendChild(liNode);
}