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

CDe*_*tin 6 javascript

我想在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>
Run Code Online (Sandbox Code Playgroud)

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

Ben*_*n S 13

如果要查找它,为什么要通过按钮?

此外,由于您知道可能的值,您只需要检查它是否为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";
  }
}
Run Code Online (Sandbox Code Playgroud)

如果你想获得花哨并保存几个字节,你可以使用三元运算符:

function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}
Run Code Online (Sandbox Code Playgroud)


ric*_*age 11

您的两个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";}
}
Run Code Online (Sandbox Code Playgroud)

添加elsein应该可以阻止这种情况发生.

  • 此外,如果您知道该值只能为"ON"或"OFF",则可以省略第二个"if",并简单地使用"else". (4认同)