How to use event listener to toggle class to individual list item

user_7899438 0
Viewed 9716

So I'm trying to make a simple to do list app. I want to add the class "checked" to list items when they are clicked on. I was trying to use event delegation to do this but I don't think I'm doing it correctly. I wasn't sure if I should use "addEventListener" or "onclick." And what is the difference really? I'm sort of new to javascript so if you could explain accordingly I'd appreciate it. 

<div id="todoList">
    <h1>To Do List</h1>
      <form id="todoForm">
        <input id="todoInput">
        <button type="button" onclick="todoList()">Click Here</button>
      </form>
    <div id="listText">
      <ul id="list">
      </ul>
    </div>
  </div>

The CSS

#todoList {
  display: block;
  text-align:center;
}
li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black

}
#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

ul li.checked {
  text-decoration: line-through;
}

The script

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


  var ul = document.getElementById("ul");
  ul.addEventListener("click", function(e) {
    if (e.target.tagName === "li"){
      e.target.classList.toggle("checked");
    }

  });
toggle addeventlistener onclick css javascript
3 Answers

You were actually really close!

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}

var ul = document.getElementById("list");
  ul.addEventListener("click", function(e) {
  if (e.target.tagName === "LI"){
    e.target.classList.toggle("checked");
  }
});

Your first issue was that you were doing document.getElementById('ul'), your ul element's ID was actually list. Just a silly mistake.

I actually had to open devtools and put a breakpoint in on your conditional to check what had been clicked on.

Turns out e.target.tagName was evaluating to LI not li.

Just needed to change the check to LI

As for how to use events. onclick will do the same job as addEventListener. The way that you've done it here with event delegation is pretty much as good as you're gonna get it with vanilla JS. It all really comes down to personal preference at the end of the day, some frameworks may have you setup events through element attributes and some will have you set them up with event listeners, you could mix and match if you wanted. It's really down to you and your team (if it's a collaborative project).

user_12339080

you can use .delegate 

$(document).delegate('h', 'click', function () {
        var id = this.id;
        document.getElementById('chkod').value = id;
    });
user_55835290

You need to check with uppercase LI.For case insensitive search use localeCompare & there is no element with id ul

function todoList() {
  var item = document.getElementById("todoInput").value;
  var text = document.createTextNode(item);
  var listItem = document.createElement("li");
  listItem.appendChild(text);
  document.getElementById("list").appendChild(listItem);
}


var ul = document.getElementById("list");
ul.addEventListener("click", function(e) {
  if (e.target.tagName.localeCompare("li")) {

    e.target.classList.toggle("checked");
  }

});
#todoList {
  display: block;
  text-align: center;
}

li {
  list-style: none;
  text-align: left;
  border-bottom: 1px solid black
}

#listText {
  margin-top: 10px;
  margin-left: 30%;
  margin-right: 30%;
  padding-left: 70px;
  padding-right: 85px;
}

.checked {
  text-decoration: line-through;
}
<div id="todoList">
  <h1>To Do List</h1>
  <form id="todoForm">
    <input id="todoInput">
    <button type="button" onclick="todoList()">Click Here</button>
  </form>
  <div id="listText">
    <ul id="list">
    </ul>
  </div>
</div>

user_21813970
Related