How to toggle name attribute using JS when using ionicons

Question

I hope all is well,

I want to change the menu from the hamburger to closed when clicked. I just need to target the name attribute on the icon using ionicons.com

<ion-icon name="menu-sharp" class="text-3xl cursor-pointer"></ion-icon>

I can target the element using:

const menu = document.querySelector('ion-icon');

but when i try to toggle or add/remove using:

menu.addEventListener('click', () => {
    console.log('clicked')
    toggleMenu()
})

function toggleMenu() {
    menu.classList.remove('menu-sharp')
    menu.classList.add('close-sharp')
    navLinks.classList.toggle('top-[14%]')
}

it doesn't work because i am not targeting the name attribute from the HTML above

classList is used to manage the classes of an element. To mutate other attributes either set them directly if available or use setAttribute. menu.setAttribute('name', 'close-sharp') — pilchard
– pilchard, Commented Mar 19, 2023 at 12:12
Does this answer your question? Change HTML name attribute using JavaScript — pilchard
– pilchard, Commented Mar 19, 2023 at 12:27
First of all "navLinks" varible is not defined. Second, you have to use ";" at the end of every expression. — luknij
– luknij, Commented Mar 19, 2023 at 12:33
@luknij semicolons aren't required here. And it seems a safe assumption that navLinks is defined elsewhere given that the question is about mutating the name attribute of the menu element. — pilchard
– pilchard, Commented Mar 19, 2023 at 13:04

luknij · Accepted Answer · 2023-03-19 13:49:02Z

1

Well in case if you want to toggle name attribute this code will not work becouse you targeting class of the element by menu.classList.remove. If you want to change the attribute name you have to target the attribute name like this:

const menu = document.querySelector('ion-icon');
menu.addEventListener('click', () => {
  toggleMenu();
})


function toggleMenu() {
  menuAttr = menu.getAttribute('name');  
  
  if(menuAttr == 'menu-sharp'){
    menu.setAttribute('name','close-sharp');  
  }else{
    menu.setAttribute('name','menu-sharp');
  }

Hope this help you!

answered Mar 19, 2023 at 13:49

luknij

3131 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to toggle name attribute using JS when using ionicons

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related