How to check if an element class child has a specific class

Question

I read some topics about this before but this is the first time I try to apply it, but I got quite confused about how to check if some element has a class child and add some new class into it.

let say I want to add an active class to a li element child after click it. This is step by step that I want to do:

1. Check if there is an active class in the li element after clicking it
2. if there is none then add active class and if it already there then return or do nothing

for number 1 I read this topic check-if-an-element-contains-a-class-in-javascript but I quite confused of how to check in a child

and for number 2 I already make the function for it but I quite confused where I must put it in my code

this is my html:

<li id="test" class="additional-menu"><a href="#">Link1</a>
 <ul>
 <li class="active"><a href="#" id="">Home</a></li>
 <li><a href="#">Career</a></li>
 <li><a href="#">Privacy Policy</a></li>
 </ul>
</li>

this is my css:

.active{
 color: red
}

this is my js to check the child:

// This is for check a normal class but I doesn't know how to check a child class element from this
function hasClass(element, cls) {
 return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var el = document.getElementById('test');
alert(hasClass(el, 'active'));
// I can use this function if it inside button using onClick
// But I got quite confused of how to use it without button
function addClass () {
 var x = document.getElementsById("test")[0]; 
 x.className += ' active';
}

Can someone help me to understand this? for your imagination, I want to make a navbar using this and the class still there when I move to a different routing let say if I'm in home I want the class to stay in home and if I'm in career I want the class to stay in there. I feel like I already there to solved it but still no luck

Answer 1

• Firstly attached click listener to immediate parent of all your click elements.
• Then remove the "active" class by looping through all the children's elements.
• Finally, add active class to the target you received in the click event itself

document.addEventListener('DOMContentLoaded', ()=>{
 // event attached to parent for getting clicks of all child while bubbling
 document.querySelector(".parent").addEventListener("click", (event)=>{
 event.preventDefault(); //prevent default "a" tag redirect
 
 let target = event.target;
 
 if(target.tagName != "A"){
 return; // to make sure only <a> is been clicked
 }
 target = target.parentElement; //make related li as target now
 
 for(let li of target.parentElement.children){ //all child of parent ul
 li.classList.remove("active");
 }
 target.classList.add("active");
 });
});

.active{
 color: red
}

<li id="test" class="additional-menu"><a href="#">Link1</a>
 <ul class="parent">
 <li class="active"><a href="#" id="">Home</a></li>
 <li><a href="#">Career</a></li>
 <li><a href="#">Privacy Policy</a></li>
 </ul>
</li>

• Rakish Frisky: Wow thankyou it works, but can you explain it a little bit as from where the click come in addEventListener("click" and is tagName the same as className?
• HugeBelieve: About click, it can come in from any click/grandchild element of <ul class="parent"> so we can cater all of them at once. And tagName just gives you the HTML tag of an element TagName