2010-06-15 87 views
6

我想在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。

回答

10

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在那裏應該阻止這種情況發生。

+3

此外,如果您知道該值只能是「ON」或「OFF」,可以完全省略第二個「if」,並簡單地使用「else」。 – 2010-06-15 18:06:50

13

爲什麼你要通過按鈕,如果你要查找它?

另外,既然您知道可能的值,您只需檢查它是否關閉,否則,您知道它是開啓的。

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

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

+1

整潔,從來沒有jsfiddle之前,謝謝! – 2010-06-15 18:22:30

1

爲什麼不使用一個開關?

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

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

+2

一個布爾值的開關是一種矯枉過正。 – 2016-04-28 14:22:12

0

另一種方法來做到這一點:

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

問候:)

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

總是將腳本放在head標籤中,因爲當頁面加載時腳本首先被加載 – 2017-08-20 17:27:19

相關問題