the process of attaching an event listener to every item in a list and accessing them individually

Question

the process of attaching an event listener to every item in a list and accessing them individually

When you click on an item in the list, it will switch the .done class on and off.

<ul>
    <li class="bold red" random="23">Notebook <button>Delete</button></li>
    <li>Jello <button>Delete</button></li>
    <li>Spinach <button>Delete</button></li>
    <li>Rice <button>Delete</button></li>
    <li>Birthday Cake <button>Delete</button></li>
    <li>Candles <button>Delete</button></li>
</ul>

javascript arrays

Answer 1

Answer №1

One way to achieve this is by adding a delegate event on the parent ul element and checking if the clicked element is an LI. If it is, you can toggle the class using classList.toggleClass.

Additionally, considering user behavior, it's advisable to handle double clicks as well. For instance, when a user adds a to-do item, they may want to select and copy it.

const ul = document.querySelector("ul.item-list");
ul.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI')
    event.target.classList.toggle('done')
})

.done {
  text-decoration: line-through;
}

<ul class='item-list'>
  <li class="bold red" random="23">Notebook <button>Delete</button></li>
  <li>Jello <button>Delete</button></li>
  <li>Spinach <button>Delete</button></li>
  <li>Rice <button>Delete</button></li>
  <li>Birthday Cake <button>Delete</button></li>
  <li>Candles <button>Delete</button></li>
</ul>

Answer 2

One way to achieve this is by adding a delegate event on the parent ul element and checking if the clicked element is an LI. If it is, you can toggle the class using classList.toggleClass.

Additionally, considering user behavior, it's advisable to handle double clicks as well. For instance, when a user adds a to-do item, they may want to select and copy it.

const ul = document.querySelector("ul.item-list");
ul.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI')
    event.target.classList.toggle('done')
})

.done {
  text-decoration: line-through;
}

<ul class='item-list'>
  <li class="bold red" random="23">Notebook <button>Delete</button></li>
  <li>Jello <button>Delete</button></li>
  <li>Spinach <button>Delete</button></li>
  <li>Rice <button>Delete</button></li>
  <li>Birthday Cake <button>Delete</button></li>
  <li>Candles <button>Delete</button></li>
</ul>

the process of attaching an event listener to every item in a list and accessing them individually

Answer №1

Similar questions

The functionality of opening a link in a new tab is not functioning properly in Internet Explorer

Enhancing Request JSON Body Validation in Next.js 14 API Handler

Error: The middleware function is not recognized | Guide to Transitioning to React Redux Firebase v3

Enhancing Json_Encode output with extra arrays

Using jQuery, JavaScript, and PHP, we can easily implement the functionality to disable the form and submit button

Issue with Ng-style not functioning properly when setting background color

Resolved: Angular JS resolves circular dependencies

Encountering the "Local resource can't be loaded" error when attempting to link a MediaSource object as the content for an HTML5 video tag

Tips for restricting users from inputting spaces into a form field using ReactJS

The nightwatch.js script is halting operations once the test suite has been completed

Printing all elements in a table (int) using the printf function

Adjust the header image as you scroll

Error: Attempting to access a property named '_updatedFibers' on an undefined object is not possible due to a TypeError

Tips for enhancing image resolution when converting from canvas toDataURL

Checking the parameters passed to a function in Typescript: A step-by-step guide

Updating state in React is not possible

Learn how to dynamically disable unchecked checkboxes and apply specific CSS classes to checked checkboxes in Angular 12 with TypeScript

Having trouble getting an HTML form to function with Ajax and PHP?

Can anyone provide guidance on displaying a JS alert every time a tab in the slider is opened?

Exploring Symfony2 controller integration with Javascript arguments