如何在 JavaScript 中打开和关闭灯泡？

Question

我正在 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>

Answer 1

您使用的是全局变量，但您在函数内部为局部变量传递了一个值。那么这个变量的改变不会影响全局值，因为原始值是按值传递的。

你需要把这一行改成（没有on）

<button id = "button" onclick="light()"></button>

和函数签名，没有变量

function light() {

现在您访问全局变量 on 并更改值。

只是另一个提示，你可以取一个布尔值（true或false）并通过直接使用变量省略if语句中的检查并省略第二次检查，因为您只有两个值。

也许您可以省略第二个数字值检查，因为您没有分配与 0 或 1.

不同的值的代码

Answer 2

<!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()

Answer 3

全局变量不会因函数内局部变量值的变化而变化。检查语言文档中的范围规则以理解它。当您打开它时，值会更改，但关闭它的功能将不起作用，因为您没有更改全局变量。

Answer 4

这个问题已经回答了，但是一些演示和澄清问题的伪代码是：

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

如何在 JavaScript 中打开和关闭灯泡？

How to turn a lightbulb on and off in JavaScript?

javascript

boolean

element

src