const dropdownmenu = document.querySelector(".dropdownmenu")
dropdownmenu.forEach(element => {
console.log(element.classname)
});
Question is How can i get classname of element of foreach in Javascript ?
Add a comment
|
1 Answer
Two issues:
document.querySelectoronly selects one element - the first element that matches the specified selector. You should usedocument.querySelectorAllto grab an array of elements..classnameshould be camelcased ->.className
I'm assuming you are trying to grab the elements inside of the dropdown menu. Here's how you'd do that:
<ul class="dropdown-menu">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
</ul>
<script>
const menu = document.querySelector('.dropdown-menu')
for (const elem of menu.querySelectorAll('.item')) {
console.log(elem.className);
}
</script>If you're trying to listen for events on the dropdown menu for all of the items, try putting the event listener right on the parent and using e.target to target the clicked child.
<p>Click the items</p>
<ul class="dropdown-menu">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
</ul>
<script>
const menu = document.querySelector('.dropdown-menu');
menu.addEventListener('click', (e) => {
console.log(e.target.textContent);
});
</script>
4 Comments
Mutlu ŞEN
So how can i understand using "addEventListener" that i which button i click ? I mean, i'm trying to make a dropdown menu using javascript.
mstephen19
At that point, you want to add the event listener right on the parent element, rather than on every single dropdown item.
Mutlu ŞEN
Can you give me an example about your said thing ?
mstephen19
@MutluŞEN Check my updated answer :D It's there