Toggle onclick function on an image source in HTML and JS

Question

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 should check what the current state is to decide on what image src should be — Steven Summers
– Steven Summers, Commented Jul 23, 2022 at 7:28

Mina · Accepted Answer · 2022-07-23 07:38:42Z

2

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

answered Jul 23, 2022 at 7:38

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamshid Akbarov · Accepted Answer · 2022-07-23 07:38:28Z

1

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!

answered Jul 23, 2022 at 7:38

Jamshid Akbarov

651 silver badge8 bronze badges

Collectives™ on Stack Overflow

Toggle onclick function on an image source in HTML and JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related