Change Icon after clicking it and also when we click on other button in html-CodePudding

I am looking to change the Icon when i click on it and also when i press another button.

Current situation: i m able to change the icon using .toggle but unable to figure out way to change it when i press another button.

Code:

HTML:

<a link=# onClick="someOtherFunction()">Change Icon by Click</a>
<br>
<button  onclick= "someOtherFunction(); changeIcon();">
            <i id ='mailBTN'  onclick="changeIcon(this)"></i>

            <!-- this is the icon i want 
                  <i >
              </i> -->

</button>

JavaScript:

function changeIcon(icon){
    icon.classList.toggle('fa-envelope-open-text');
}

CodePudding user response：

You can find your element by using Javascript getElementById method.

function anotherButtonClick() {
  var el = document.getElementById("mailBTN");
  el.classList.toggle('fa-envelope-open-text');
}

Then you can toggle your classList as you did for other button before.