Event Listener is not working in javascript

Question

I want to create simple To-do list.i am adding delete button in front of every added item.items are adding successfully.first click event is working perfectly.but my code is not executing second event listener for delete button.

        var getinput = document.getElementById("inputItem");
    
    document.getElementById("addItem").addEventListener("click", () => {
      if (getinput.value == "") {
        console.log("Error:Please enter some value[![enter image description here][1]][1]!");
      } else {
        var node = document.createElement("li");
        var btn = document.createElement("button");
        btn.style.width = "50px";
        btn.style.height = "20px";
        btn.innerHTML = "delete";
        btn.setAttribute("class", "delBtn");
        var text = document.createTextNode(getinput.value);
        node.appendChild(text);
        node.appendChild(btn);
        console.log(getinput.value);
        var unorder = document.getElementById("unorder");
        unorder.appendChild(node);
      }
    });

    <body>
    <div class="main-wrapper">
      <input
        type="text"
        id="inputItem"
        placeholder="Enter your Activity"
      /><button id="addItem">Add item</button>
      <div class="listDiv">
        <ul id="unorder">
         
        </ul>
      </div>
    </div>
  </body>

Upper Event Listener is only working //Here i want to delete a selected item;

console.log("hlo");//just checking 
document.getElementsByClassName("delBtn").addEventListener("click", () => {
  console.log("button clicked");
  var getunorder = document.getElementById("unorder");
  for (var i = 0; i < getunorder.children.length; i++) {
    console.log(i);
  }
});

`getElementsByClassName()` returns a node list (a container object). You can't use `.addEventListener()` on a node list, only on individual elements. Also, [don't use `getElementsByClassName()` in 2020](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474). Use `.querySelectorAll()` instead. — Scott Marcus, Jul 01 '20 at 21:58
And if you're adding additional delete buttons dynamically, see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jul 01 '20 at 22:00
actually problem is ..code is not executing till this event listener.i print hlo world on on the top of it..it is also not print on console — salik saleem, Jul 01 '20 at 22:00
You should be getting an error from that line, so the script stops there. — Barmar, Jul 01 '20 at 22:00

Event Listener is not working in javascript

0 Answers0