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');
}
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.