How to make your to-do list editable with basic JavaScript

A to-do list is one of the first projects many developers create. The basic components are a way to add items and a way to delete them. This article is for those who have already implemented these basics and want to add the extra feature of being able to edit items once they are added.

Experiment with my to-do list here and if you’d like to inspect the code, you can find it on GitHub here. Note: it is only optimized for laptops at this time.

How to edit items

I wanted to be able to double click an item on the list in order to change it. Maybe I misspelled it or something. In my HTML, I used list elements for items. The high level idea was to temporarily replace the list element with an input element, type in something new, then change it back to a list element. To achieve this, I first added an event listener to each item when it was created:

Next, I created the editItem function. The list item you want to change is replaced by an input element with the same value. Then you are able to edit that value. These are the inner workings:

The final step was to create the saveItem function in order to make my changes permanent. This basically reverses the steps above, replacing the input element and its new value with a new list element, though this time permanently (until you double click again, that is). Here's what it looks like:

That's it! If you happen to inspect it on GitHub, you will see some extra lines of code in my editItem and saveItem functions that allow you to retain the original value of the item in case you completely delete the input value, but that is beyond the scope of this article so I left it out for simplicity. I hope this helps you make all your editable-to-do-list-dreams come true!

Originally published at https://dev.to on September 23, 2021.