Now you can load your to-do list and add items to it, but what's the point if you can't check them off when you've done them? Next up, you're going to do just that, and it'll be pretty easy. First, you need to connect double-clicking on a list item (
li
tag) to yourtoggleToDoItemState
function. You can do this by having JavaScript listen for double-clicking onli
tags and running a function that calls yourtoggleToDoItemState
function. It looks like this:document.getElementById("todo").addEventListener("dblclick",function(event){ if(event.target && event.target.matches("li")){ toggleToDoItemState(event.target) } })
What's happening here is:
- JavaScript is listening to all double-clicks that happen on the
todo
list - If it “hears” one, it runs a function, into which it passes the details of the click
event
- If the
event
had atarget
(a thing that was clicked on) and thattarget
matches"li"
, which is the HTML tag for a list item then:- Run
toggleToDoItemState
and pass it theevent.target
information
- Run
- JavaScript is listening to all double-clicks that happen on the
Next, you need to update your
toggleToDoItemState
function so it adds thecompleted
class (a HTML property—a tag, like<li>
can have many classes) to the item that was double-clicked, which will put a line through it using some of my CSS code. Thankfully, in modern JavaScript, that's pretty simple! Just update this totoggleToDoItemState
:function toggleToDoItemState(target){ target.classList.toggle("completed") }