Question

我正在尝试在javascript中创建一个简单的切换按钮。但是，该按钮只会变为“OFF”而不会变回“ON”

<html><head></head>
<script type="text/javascript">
function toggle(button)
{
  if(document.getElementById("1").value=="OFF"){
   document.getElementById("1").value="ON";}

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

我正在运行：HP Netbook：Ubuntu Linux 10.04：适用于Ubuntu 1.0的Firefox。

Answer 1

如果要查找按钮，为什么要通过按钮？

此外，由于你知道可能的值，你只需要检查它是否为OFF，否则，你知道它是ON。

// 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";}

Answer 2

您的两个if语句一个接一个地执行，因为您更改了值，然后立即再次读取并将其更改回来：

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应该可以阻止这种情况发生。

Answer 3

为什么不使用开关？

function toggle(button) 
{
     switch(button.value)
     {
          case "ON":
               button.value = "OFF";
               break;
          case "OFF":
               button.value = "ON";
               break;
     }
}

Answer 4

另一种方法是：

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");
});

问候：）

Answer 5

<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>

我想在javascript中创建一个简单的切换按钮

5 个答案: