我想在javascript中制作一个简单的切换按钮

我想在javascript中制作一个简单的切换按钮。然而，该按钮只会使 “OFF”，也不会回头 “ON”我想在javascript中制作一个简单的切换按钮

<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上网本：Ubuntu Linux操作系统的10.04：火狐为Ubuntu 1.0。

来源

2010-06-15 CDeanMartin

您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在那里应该阻止这种情况发生。

来源

2010-06-15 18:05:04 richsage

此外，如果您知道该值只能是“ON”或“OFF”，可以完全省略第二个“if”，并简单地使用“else”。 – 2010-06-15 18:06:50

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

另外，既然您知道可能的值，您只需检查它是否关闭，否则，您知道它是开启的。

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

来源

2010-06-15 18:08:07

演示在http://www.jsfiddle.net/EfjUB/1/ – gnarf 2010-06-15 18:14:25

整洁，从来没有jsfiddle之前，谢谢！ – 2010-06-15 18:22:30

为什么不使用一个开关？

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

来源

2010-06-15 18:18:04 Tester101

'.value' not'.Value' – gnarf 2010-06-15 18:55:07

一个布尔值的开关是一种矫枉过正。 – 2016-04-28 14:22:12

另一种方法来做到这一点：

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

问候:)

来源

2017-05-20 18:15:52

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

来源

2017-08-20 17:25:14

总是将脚本放在head标签中，因为当页面加载时脚本首先被加载 – 2017-08-20 17:27:19

我想在javascript中制作一个简单的切换按钮

回答

相关问题