[英]multiple statements else if not working
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, 但是使用这个代码,第二个
else if
不起作用,
and the 3° image (VOL-1.png) does not appears... 并且没有出现3°图像(VOL-1.png)......
All the other images (VOL-off, VOL-2, VOL-on) appear properly... 所有其他图像(VOL-off,VOL-2,VOL-on)正确显示......
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? 我做错了什么?
Any number which is lesser than 0.4
will also be lesser than 0.65
. 任何小于
0.4
也将小于0.65
。 So, when the number is lesser than 0.4
, it compares against <= 0.65
, it is Truthy, so displays VOL-2
picture. 因此,当数字小于
0.4
,它与<= 0.65
比较,它是Truthy,因此显示VOL-2
图片。
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 {
...
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-else语句按顺序进行评估,因此它会卡在VOL-2中,因为VOL-1的任何选项也符合VOL-2。 If you were to switch the order of VOL-1 and VOL-2, it should work.
如果您要切换VOL-1和VOL-2的顺序,它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.