我正在尝试在 javascript 中制作一个简单的切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3047755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I am trying to make a simple toggle button in javascript
提问by CDeanMartin
I am trying to make a simple toggle button in javascript. However, the button will only turn "OFF" and will not turn back "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>
I am running:HP Netbook : Ubuntu Linux 10.04 : Firefox for Ubuntu 1.0.
我正在运行：HP 上网本：Ubuntu Linux 10.04：Ubuntu 1.0 的 Firefox。
回答by Ben S
Why are you passing the button if you're going to look it up?
如果您要查找它，为什么要通过按钮？
Also, since you know the possible values, you only need to check if it's OFF, otherwise, you know it's ON.
此外，由于您知道可能的值，您只需要检查它是否为 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";
}
}
If you wanna get fancy and save a couple of bytes you can use the ternary operator:
如果你想花哨并节省几个字节，你可以使用三元运算符：
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}
回答by richsage
Both of your ifstatements are getting executed one after each other, as you change the value and then immediately read it again and change it back:
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";}
}
Adding the elsein there should stop this happening.
else在那里添加应该阻止这种情况发生。
回答by Tester101
Why not use a switch?
为什么不使用开关？
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
回答by Jesus Romero
Another method to do this is:
另一种方法是：
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;
});
In the JavaScriptfile.
在JavaScript文件中。
/*****
/*****
NOTE! Another way is applying a class to the element that we want to change.
笔记！另一种方法是将类应用于我们想要更改的元素。
The CSSfile must have the class with the format we want:
该CSS文件必须具有我们想要的格式的类：
.orange {
background: orange;
}
By last in our jsfile we only need to make the application of the class:
最后在我们的js文件中，我们只需要创建类的应用程序：
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("orange");
});
Regards :)
问候 ：）
回答by Anshuman Sharma
<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>
