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

Web Page Content Scrambling/Character Exchange

Designing Object-Oriented JavaScript

JavaScript's ability to call object properties at multiple levels allows for complex data

Inspect the json data to find a specific value and then determine the corresponding key associated with

Angular: Exploring the differences between $rootScope variable and event handling

If the item already exists within the array, I aim to replace the existing object with the new one

Improving the quality of shadows in Three.js

Differentiating Typescript will discard attributes that do not adhere to an Interface

emulating the behavior of a synchronous XmlHttpRequest

Is there a way to automatically fill up a second dropdown menu based on the user's selection from the first dropdown

comparing caching with jquery deferred against promise

What are some tips for incorporating vue.js into a basic web application?

Tips for incorporating JSON data into an HTML table

Unexpected results occur when accessing data in $uibModal.open() within Angular JS causing it to

ContainerView: challenges encountered when dynamically inserting views

Steps to close a socket upon session expiration

Guide on exporting a reducer from a Node module built on React Redux

The AJAX form fails to submit the information, causing PHP to not process the request

Guide to bringing in a variable from an external module

Setting limits to disable or remove specific times from the time picker input box in Angular