我正在尝试用javascript制作一个简单的切换按钮_Javascript_Html

我正在尝试用javascript制作一个简单的切换按钮

javascript html

我正在尝试用javascript制作一个简单的切换按钮,javascript,html,Javascript,Html,我试图用javascript制作一个简单的切换按钮。但是，该按钮只会关闭，不会再打开功能切换（按钮） { if（document.getElementById（“1”）.value==“OFF”）{ document.getElementById（“1”）.value=“ON”；} if（document.getElementById（“1”）.value==“ON”）{ document.getElementById（“1”）.value=“OFF”；} } 我正在运行：HP Netbo

我试图用javascript制作一个简单的切换按钮。但是，该按钮只会关闭，不会再打开


功能切换（按钮）
{
if（document.getElementById（“1”）.value==“OFF”）{
document.getElementById（“1”）.value=“ON”；}
if（document.getElementById（“1”）.value==“ON”）{
document.getElementById（“1”）.value=“OFF”；}
}

我正在运行：HP Netbook:Ubuntu Linux 10.04:Firefox for Ubuntu 1.0。

如果您的

语句一个接一个地执行，当您更改值，然后立即再次读取并更改回值时：
function toggle(button)
{
  if(document.getElementById("1").value=="OFF"){
   document.getElementById("1").value="ON";}

  else if(document.getElementById("1").value=="ON"){
   document.getElementById("1").value="OFF";}
}

在那里添加else
应该可以阻止这种情况发生。
如果要查找它，为什么要传递按钮
另外，因为您知道可能的值，所以只需检查它是否关闭，否则，您就知道它已打开
// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
  if (button.value == "OFF") {
    button.value = "ON";
  } else {
    button.value = "OFF";
  }
}

如果您想节省一些字节，可以使用三值运算符：
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}

为什么不用开关呢
function toggle(button) 
{
     switch(button.value)
     {
          case "ON":
               button.value = "OFF";
               break;
          case "OFF":
               button.value = "ON";
               break;
     }
}

另一种方法是：
var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;

button.addEventListener("click", function() {
if(isOrange) {
    body.style.background = "orange";
}else {
    body.style.background = "none";
}
isOrange = !isOrange;
});

在JavaScript
文件中
/*****
注意！
另一种方法是将类应用于我们要更改的元素
CSS
文件必须具有我们想要的格式的类：
.orange {
background: orange;
}

最后，在我们的js
文件中，我们只需要创建类的应用程序：
var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("orange");
});

问候：）

功能切换（按钮）
{
if（document.getElementById（“1”）.value==“OFF”）
{
document.getElementById（“1”）.value=“ON”；
}
其他的
{
document.getElementById（“1”）.value=“OFF”；
}
}
此外，如果您知道该值只能是“开”或“关”，则可以完全忽略第二个if
，只需使用else。布尔值的切换有点过火。始终将脚本放在head标记中，因为加载页面时脚本首先加载
var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("orange");
});

<html>
    <head>
        <script type="text/javascript">
            function toggle(button)
            {
              if(document.getElementById("1").value=="OFF")
              {
               document.getElementById("1").value="ON";
              }
              else
              {
                document.getElementById("1").value="OFF";
              }
            }
        </script>
    </head>
    <body>
        <form action="">
            <input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
        </form>
    </body> 
</html>