Toggle onclick function on an image source in HTML and JS-CodePudding

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  id="speakerbtn"><img src="images/images/speaker-icon.png"  id="myImage">
                <span >Sound</span>
              </div>

 let image = document.getElementById('myImage');

    image.addEventListener('click', function(){
        changeImage();
    });

    function changeImage(){
        image.src = 'images/images/volume-mute-icons.png';  
    }

CodePudding user response：

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

CodePudding user response：

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!