multiple statements else if not working

StackOverflow https://stackoverflow.com/questions/23464727

  •  15-07-2023
  •  | 
  •  

Question

I'm trying to replace a volume image when the player's volume level changes,
but with this code, the second else if does not work,
and the 3° image (VOL-1.png) does not appears...

All the other images (VOL-off, VOL-2, VOL-on) appear properly...

var myVideo1 = document.getElementById('myVideo1');
var bttnMuteUnmute = document.getElementById("bottoncinoMuteUnmute_myVideo1");

myVideo1.addEventListener("volumechange", function () {
    if (myVideo1.muted || myVideo1.volume <= 0.009) {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-off.png)";
    } else if (myVideo1.volume <= 0.65) {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-2.png)";
    } else if (myVideo1.volume <= 0.4) {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-1.png)";
    } else {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-on.png)";
    }
}, false);

What I'm doing wrong?

Was it helpful?

Solution

Any number which is lesser than 0.4 will also be lesser than 0.65. So, when the number is lesser than 0.4, it compares against <= 0.65, it is Truthy, so displays VOL-2 picture.

So, you just have to change the order of the conditions, like this

...
} else if (myVideo1.volume <= 0.4) {
bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-1.png)";
} else if (myVideo1.volume <= 0.65) {
bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-2.png)";
} else {
...

OTHER TIPS

Since if-else statements are evaluated in order, it gets stuck in VOL-2 because any option for VOL-1 also meets VOL-2. If you were to switch the order of VOL-1 and VOL-2, it should work.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top