我想在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中製作一個簡單的切換按鈕

回答

相關問題