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

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 class="mail_btn click" onclick= "someOtherFunction(); changeIcon();">
            <i id ='mailBTN' class="fa-solid fa-envelope envelope" onclick="changeIcon(this)"></i>

            <!-- this is the icon i want 
                  <i class="fa-solid fa-envelope-open-text">
              </i> -->

</button>

JavaScript:

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


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions