Acquire the <li> element when it is clicked using vanilla JavaScript

Question

Acquire the <li> element when it is clicked using vanilla JavaScript

Whenever a user enters a value in an input field, my function automatically adds a <li> element to a <ul>. Additionally, the function assigns the attribute ( onclick="doneToggle" ) to the created <li>.

function createListElement() {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.appendChild(document.createTextNode(input.value));
    li.setAttribute("onclick", "doneToggle()")
    li.setAttribute("style", "width: fit-content")
    input.value = "";
}

The doneToggle function is designed to add a specific CSS class to the clicked element, giving the text a "line-through" style.

Here is the existing function:

function doneToggle(element) {
    element.classList.toggle("done");
}

I wish for this function to toggle the class of the clicked element without the need to assign IDs to the <li> elements. Your assistance is greatly appreciated.

javascript dom

Answer 1

Answer №1

It is recommended to use

Element.prototype.addEventListener()

rather than using the onclick attribute. By doing so, the event will be automatically passed to the handler function, allowing access to the event.target element on which the event occurred.

Instead of setting the onclick attribute like this:

li.setAttribute("onclick", "doneToggle()")

You should use addEventListener method as shown below:

li.addEventListener('click', doneToggle)

Then within the doneToggle function, you can work with the event passed and access the clicked element using event.target:

function doneToggle(event) {
    event.target.classList.toggle("done");
}

Answer 2

It is recommended to use

Element.prototype.addEventListener()

rather than using the onclick attribute. By doing so, the event will be automatically passed to the handler function, allowing access to the event.target element on which the event occurred.

Instead of setting the onclick attribute like this:

li.setAttribute("onclick", "doneToggle()")

You should use addEventListener method as shown below:

li.addEventListener('click', doneToggle)

Then within the doneToggle function, you can work with the event passed and access the clicked element using event.target:

function doneToggle(event) {
    event.target.classList.toggle("done");
}

Answer 3

Answer №2

When working with event listeners, the keyword this is used to reference the element that triggered the event. Instead of mistakenly using element, which actually refers to an Event Object, it's important to use this:

function doneToggle(event) {
    this.classList.toggle("done");
}

Rather than making changes directly to the "onclick" attribute, it's better to incorporate an event listener:

function createListElement() {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.appendChild(document.createTextNode(input.value));
    li.addEventListener("click", doneToggle)
    li.setAttribute("style", "width: fit-content")
    input.value = "";
}

Answer 4

When working with event listeners, the keyword this is used to reference the element that triggered the event. Instead of mistakenly using element, which actually refers to an Event Object, it's important to use this:

function doneToggle(event) {
    this.classList.toggle("done");
}

Rather than making changes directly to the "onclick" attribute, it's better to incorporate an event listener:

function createListElement() {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.appendChild(document.createTextNode(input.value));
    li.addEventListener("click", doneToggle)
    li.setAttribute("style", "width: fit-content")
    input.value = "";
}

Acquire the <li> element when it is clicked using vanilla JavaScript

Answer №1

Answer №2

Similar questions

`Javascript often returns NaN for basic calculations`

Tips for displaying real-time data and potentially selecting alternative options from the dropdown menu

Redirecting to new page after submitting form using Ajax

Identifying a failed Ajax Request in JavaScript

What is the best way to modify the size of a canvas element while maintaining effectiveness?

Convert your AS3 code to JavaScript with our specialized compilers

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

Issue with UseState causing a re-render not to be triggered

Can you explain the significance of "=>" in a context other than function invocation?

What is the best way to use AJAX to load a PHP file as a part

Converting Strings into Variable Names in Vue.js: A Step-by-Step Guide

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Tips for telling the difference between typescript Index signatures and JavaScript computed property names

Why is my JavaScript code running but disappearing right away?

Tips for validating forms using jQuery

Redis appears to be missing the expected results

The log indicates that there are two distinct IP addresses associated with the user

The order of items in MongoDB can be maintained when using the $in operator by integrating Async

Using ReactJS and react-router to exclude the navigation menu on the login page

Instructions on utilizing the signUp() function in Supabase for including extra user details during the registration process