我在javascript中制作了一个函数，该函数应该更改html元素的src以使其看起来像html元素（灯泡）处于打开和关闭状态。它包含if else if语句，以检查灯泡是否已经关闭或打开，然后将其转到相反方向。该功能通过按钮关闭。
我的问题是，当我单击按钮时，它会打开灯泡，但是当我再次单击它时，它会关闭。为什么会这样呢？我没有从控制台收到任何错误消息。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: white;
border-radius: 0.25px;
border-color: black;
height: 30px;
}
</style>
</head>
<body>
<button id = "button" onclick="light(on)"></button>
<img id="myImage" src="file:///C://Users/xenia/Downloads/light-bulb-off-
pixilart.png">
<script>
var on = 0; // 1 is true, 0 is false
function light(on) {
if (on == 0) {
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-on-pixilart.png"
on = 1
}
else if (on == 1){
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-off-pixilart.png"
on = 0
}
}
</script>
</body>
</html>
您正在使用全局变量，但要在函数内部传递局部变量的值。然后，更改此变量不会影响全局值，因为原始值是由值移交的。
您需要将此行更改为（无on）
<button id = "button" onclick="light()"></button>
和函数签名，没有变量
function light() {
现在，您访问全局变量on并更改值。
另一个提示是，您可以采用布尔值（true或false），然后if直接使用变量来忽略语句中的检查，而忽略第二个检查，因为您只有两个值。
也许您可以省略带有数字值的第二张支票，因为没有代码分配与0或不同的值1。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句