javascript - How to use event listener to toggle class to individual list item - Stack Overflow

admin管理员组

文章数量:1353326

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");
    }

  });

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");
    }

  });

• javascript
• css
• onclick
• toggle
• addeventlistener

Share Improve this question Follow asked Sep 3, 2018 at 16:21 louisebelcherlouisebelcher 9911 gold badge55 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 es 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).

you can use .delegate

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

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>

本文标签： javascriptHow to use event listener to toggle class to individual list itemStack Overflow