I am faced with a situation where I have two addEventListeners, one to change the text color and another to change the circle color.
In Condition 1: When I click on the circle, both the text and circle colors are changed.
In Condition 2: The issue arises when I click on the text, only the text color changes while the circle does not change.
Is it possible for me to combine these actions into just one addEventListener linked to the circle, and disable clicking functionality for the text? Or is there a way to make the text behave as if I clicked on the circle?
GitHub Link
App Preview
let lists = document.querySelectorAll(".list-item");
let circles = document.querySelectorAll(".fa-circle");
// Clicking on the text
Array.from(lists).forEach((list) => {
list.addEventListener("click", () => {
list.classList.add("done");
});
});
// Clicking on the circle
Array.from(circles).forEach((circle) => {
circle.addEventListener("click", () => {
circle.classList.remove("fa-regular");
circle.classList.add("fa-solid", "fa-circle-check");
});
});