如何在 JavaScript 中打开和关闭灯泡？
[英]How to turn a lightbulb on and off in JavaScript?
问题描述
我正在 javascript 中制作一个 function，它应该更改 html 元素的 src，使其看起来像 html 元素（灯泡）正在打开和关闭。 它包括一个 if else if 语句来检查灯泡是否已经关闭或打开，然后将其转向相反的方向。 function一键触发。
我的问题是，当我点击按钮时它会打开灯泡，但当我再次点击它时它会关闭。 为什么会这样？ 我没有从控制台收到任何错误消息。
这是我的代码：
<!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>
5 个解决方案
解决方案1
3 已采纳 2019-05-12 15:20:56
您正在使用全局变量，但要在函数内部传递局部变量的值。 然后更改此变量不会影响全局值，因为原始值是按值移交的。
您需要将此行更改为（不on ）
<button id = "button" onclick="light()"></button>
和函数签名，没有变量
function light() {
现在，您访问全局变量on并更改值。
另一个提示是，您可以使用布尔值（ true或false ），并直接使用变量来忽略if语句中的检查，并省略第二次检查，因为您只有两个值。
也许您可以省略带有数字值的第二张支票，因为您没有代码分配的值不同于0或1 。
解决方案2
1 2019-05-12 15:29:18
<!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();"></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() {
if (on == 0) {
document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/ligh
t-bulb-on-pixilart.png"; //You forgot a ; here
on = 1; //You forgot a ; here
}
else if (on == 1){document.getElementById("myImage").src="file:///C://Users/xenia/Downloads/light-bulb-off-pixilart.png"; //You forgot a ; here
on = 0; //You forgot a ; here
}
}
</script>
</body>
</html>
- 记住要使用； 。 这就是您的脚本停止的原因！
- 您可以像这样更简单地编写它： light（）
解决方案3
1 2019-05-12 15:45:03
全局变量不会因函数内部局部变量值的更改而改变。 在语言文档中签出范围规则以了解它。 当您将其打开时，值已更改，但用于关闭它的功能将不起作用，因为您没有更改全局变量。
解决方案4
0 2019-05-12 16:32:31
这个问题已经得到解答，但是一些演示和阐明问题的伪代码是：
bool globalVar = false
func changeState(bool localVar) {
localVar = !localVar
}
哪里
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
将输出
false
false
false
和你想要的：
bool globalVar = false
func changeState() {
globalVar = !globalVar
}
哪里
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
changeState(globalVar)
print globalVar
将输出
true
false
true
解决方案5
0 2022-12-07 12:28:00
//using localSorrage
localStorage.setItem("on",1)
lampButton.addEventListener("click",()=>{
function light(on) {
if (localStorage.getItem("on") == 0) {
lamp.style.display="none";//heddin
localStorage.setItem("on",1)
} else if (on == 1) {
lamp.style.display="block";//Visible
localStorage.setItem("on",0)
}
}
light(localStorage.getItem("on"));
});
如何使用 javascript 打开和关闭折叠
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.