开/关开关的简单脚本不起作用答案

【问题标题】：Simple Script For On/Off Switch Not Working开/关开关的简单脚本不起作用
【发布时间】：2020-09-01 19:12:35
【问题描述】：

下面我的代码的预期结果应该会给我一个小按钮，当点击时，它会在显示“开”和“关”之间切换。为了简单起见，我缩小了代码范围。关于为什么这不起作用的任何想法？

<html>
    <body>
        <button id="state" onclick="switch()">On</button>
        <script>
            function switch() {
                if (document.getElementById("state").innerHTML = "On") {
                    document.getElementById("state").innerHTML = "Off";
                } else {
                    document.getElementById("state").innerHTML = "On";
                }
            }
        </script>
    </body>
</html>

【问题讨论】：

= 是分配。 ==和===是比较
也不认为你应该在 Javascript 关键字之后命名你的函数..
另外，如果您要使用这样的内联绑定，不妨将其更改为 onclick="switch(this)" 以传递按钮，这样您的方法就不必查找它。
这能回答你的问题吗？ How to change button text or link text in JavaScript?

标签： javascript html

【解决方案1】：

您使用了保留名称“switch”并忘记使用“===”而不是“=”。

<script>
            function switchButton() {
              console.log(document.getElementById("state").innerHTML);
                if (document.getElementById("state").innerHTML === "On") {
                    document.getElementById("state").innerHTML = "Off";
                } else {
                    document.getElementById("state").innerHTML = "On";
                }
            }
        </script>  
  <button id="state" onclick="switchButton()">On</button>

【讨论】：

【解决方案2】：

你为什么不让它变得更容易？

const switchOnOff = () => {
document.getElementById("state").innerHTML == "On" ? document.getElementById("state").innerHTML = "Off" : document.getElementById("state").innerHTML = "On"
}

&lt;button id="state" onclick="switchOnOff()"&gt;On&lt;/button&gt;

【讨论】：

switchOnOff = () => { document.getElementById("state").innerHTML= document.getElementById("state").innerHTML == "On" ? "Off" : "On"; }

【解决方案3】：

有两个问题

首先函数的名称是保留名称，你不能将函数命名为'switch'，因为它是保留的

你在 if 语句中错过了 = 的第二件事

试试这个

 function switchit() {
            if (document.getElementById("state").innerHTML == "On") {
                document.getElementById("state").innerHTML = "Off";
            } else {
                document.getElementById("state").innerHTML = "On";
            }
        }

【讨论】：

【解决方案4】：

你没有在if 中测试 = 你已经设置...

function switchOnOff() {
  if (document.getElementById("state").innerHTML == "On") {
    document.getElementById("state").innerHTML = "Off";
  } else {
    document.getElementById("state").innerHTML = "On";
  }
}

<body>
  <button id="state" onclick="switchOnOff()">On</button>
</body>

而switch 是保留关键字 - 我已更改为switchOnOff。

这是另一个参考调用者的解决方案：

function switchOnOff(element) {
  if (element.innerHTML == "On") {
    element.innerHTML = "Off";
  } else {
    element.innerHTML = "On";
  }
}

<body>
  <button id="state" onclick="switchOnOff(this)">On</button>
</body>

【讨论】：