Change class and item id when receiving event click with pure javascript

Question

I have the following line:

<li id="fecharMenu">
    <i class="mdi mdi-window-close mdi-24px" id="iconFecharMenu"></i>
    <a href="#"></a>
</li>

When the user clicks on <li id="fecharMenu">, the menu closes and I would like you to change the icon and consequently, the id of the <li> of <i>, being like this:

<li id="abrirMenu">
    <i class="mdi mdi-menu mdi-24px" id="iconAbrirMenu"></i>
    <a href="#"></a>
</li>

Javascript that I currently have, it "closes" the menu only, I would like to change the icon and id of li and icon too, so you can create an event by clicking the menu open button:

document.getElementById("fecharMenu").addEventListener("click", fecharMenu);
function fecharMenu() {
    document.getElementById("barraLateral").style.width = "60px";
}

How could I do only with Javascript, without using Jquery?

Answer 1

You can exchange attributes as follows:

document.querySelector("#fecharMenu").addEventListener("click", function(){
   this.id = "abrirMenu"; // troca o id da <li>
   var i = this.children[0]; // seleciona o <i>
   i.id = "iconAbrirMenu"; // troca o id do <i>
   i.className = i.className.replace("mdi-window-close","mdi-menu"); // substitui a classe do <i>
});

Answer 2

You can use the method setAttribute to change Id as follows:

document.getElementById("fecharMenu").setAttribute("id", "abrirMenu");

In this case, I’m guessing you have a css rule for each menu id:

#fecharMenu {
    background-image : (...)
}
#abrirMenu{
    background-image : (...)
}

This way, by modifying the id, you will automatically change the icon.

But I believe that manipulating Id in that way is not best practice. I believe that manipulating classes is more appropriate, as follows:

HTML:

<li id="menu" class="aberto">
    <i class="mdi mdi-window-close mdi-24px" id="iconFecharMenu"></i>
    <a href="#"></a>
</li>

JS:

document.getElementById("menu").addEventListener("click", aoClicarMenu);
function aoClicarMenu(event) {
    if (event.target.classList.contains('aberto'){
        event.target.classList.remove('aberto');
        event.target.classList.add('fechado');
    } else {
        event.target.classList.remove('fechado');
        event.target.classList.add('aberto');
    }
    document.getElementById("barraLateral").style.width = "60px";
}

The above code checks whether the DOM element that triggered the event, in this case, the li, contains the 'open' class, if yes, it is removed, and the 'closed' class is added, and vice versa. So you’ll be able to switch the behavior of the element with each click it receives. To do this, you would have to have a CSS to set the menu icon open, or closed:

.aberto {
    background-image : (...)
}
.fechado {
    background-image : (...)
}