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

【问题标题】：How to turn a lightbulb on and off in JavaScript?如何在 JavaScript 中打开和关闭灯泡？
【发布时间】：2019-05-12 15:15:42
【问题描述】：

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

【问题讨论】：

嗨塞缪尔，欢迎来到 SO！你有小提琴吗？这将使我们更容易为您提供帮助。
我现在没有，但我会做一个
我认为 Nina 找到了您的问题，但我会在您的代码中清理一些内容以使其更清晰、更健壮。首先使用布尔值而不是 int 进行开/关，例如let lightOn = true;
我已经创建了它 - 我如何发布它？
太好了，谢谢。只需点击保存，它会在 URL 上修改一个唯一的哈希，然后您可以在此处分享。您无需登录或任何其他操作。

标签： javascript boolean element src

【解决方案1】：

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

您需要将此行更改为（不带on）

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

和函数签名，没有变量

function light() {

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

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

也许您可以省略对数字值的第二次检查，因为您没有分配与 0 或 1 不同的值的代码。

【讨论】：

感谢您的回答，但为什么这会影响我的输出？
因为你改变的是全局变量，而不是light函数中的局部变量。

【解决方案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()

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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

【讨论】：