CODEWITHSUNDEEP
javascripthtml
Gavin Walsh
Gavin Walsh

Reputation: 33

Toggle onclick function on an image source in HTML and JS

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

Upvotes: 3

Views: 850

Answers (2)

Mina
Mina

Reputation: 17079

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

Upvotes: 2

Jamshid Akbarov
Jamshid Akbarov

Reputation: 65

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!

Upvotes: 1

Related Questions