I'm pretty new to web dev so I'm currently working on a project to learn more JS. I'm trying to add a toggle function on a speaker icon as I want it to change/toggle its src from its normal state to the muted state (change the image src).
I know how to make it change once but I cannot change it back to its original state.
The code looks something like this:
<div class="tooltip" id="speakerbtn"><img src="images/images/speaker-icon.png" class="header-nav-button" id="myImage">
<span class="tooltiptext">Sound</span>
</div>
let image = document.getElementById('myImage');
image.addEventListener('click', function(){
changeImage();
});
function changeImage(){
image.src = 'images/images/volume-mute-icons.png';
}
You can easily do that with ternary operator
If image src equal isMuted flag, then show the muteIcon else show the voiceIcon, on each toggle reverse the value of isMuted.
const muteIcon = 'images/images/volume-mute-icons.png'
const voiceIcon = 'set/icon/path/here'
let isMuted = false
function changeImage() {
isMuted = !isMuted
image.src = (isMuted ? muteIcon : voiceIcon);
}Your code is working nice. Now give If condition to your function.
for example.
function changeImage(){
if image.src === 'images/images/volume-mute-icons.png'
image.src = 'images/images/speaker-icon.png'
else
image.src = 'images/images/volume-mute-icons.png';
}
then it checks your image, if it is mute image it changes to speaker, if it is speaker image it changes to mute
happy coding!