試圖做一個開/關/自動按鈕

我是JavaScript的新手，我試圖做一個按鈕，通過打開/關閉/自動每次點擊循環。每個狀態也必須在if語句和交換機中的代碼中運行代碼。我目前無法縫合來讓它正確運行。後來一旦我得到這個工作，我想要「if語句」函數在它自己的.js文件中，以便我可以參考其他on/off/auto按鈕。而交換機將是主要代碼的一部分。我究竟做錯了什麼？試圖做一個開/關/自動按鈕

function cycle() 
{ 
    var onoffB =(); 
    if (document.getElementById("button1").value="On") 
    { 
     onoffB=1; 
     document.getElementById("button1").value="Off"; 
    } 

    else if (document.getElementById("button1").value="Off") 
    { 
     onoffB=2; 
     document.getElementById("button1").value="Auto" 
    } 
    else 
    { 
     onoffB=0; 
     document.getElementById("button1").value="On" 
    } 

    switch(onoffB) 
    { 
     case 0: 
     //running code; 
     break; 
     case 1: 
     //running code; 
     break; 
     case 2: 
     //running code; 
     break; 
    } 
} 

</script> 
</head> 
<body> 

<input type="button" id="button1" value="On" onclick="cycle()"> 

</body> 
</html>

來源

2013-10-05 ewjedi

只是一個「良好做法，提示」：你應該緩存的document.getElementById（「Button1的」）放在一個變量中，並在代碼中的任何地方引用它。每個DOM搜索操作都非常昂貴。 – lukaleli

那麼，我發現有兩個大問題。首先，下面的語法是無效的JavaScript：

var onoffB =();

我想你的意思有有一個不確定的狀態onoffB，這傻冒更好用做：

var onoffB = null;

其次，您正在使用分配（=）而不是比較（==或===）。（作爲一個經驗法則，你應該總是喜歡===在==，除非你有一個很好的理由，知道自己在做什麼。）考慮以下幾點：

var x = 3;      // *sets* the value of x to 3 

var x == 3;      // invalid syntax 
var x === 3;      // invalid syntax 

if(x = 2) { print 'x is 2'; } // will *always* print 'x is 2', no matter what 
            // the value of x is; x now has the value 2 
            // PROBABLY NOT WHAT YOU WANT 

if(x = 0) { print 'x is 0'; } // will *never* print 'x is 0', no matter what 
            // the value of x is; x now has the value 0 
            // PROBABLY NOT WHAT YOU WANT 

if(x === 5) { print 'x is 5'; } // will only print 'x is 5' if the value of x 
            // is 5; value of x 

if(x === 0) { print 'x is 0'; } // will only print 'x is 0' if the value of x 
            // is 0; value of x unchanged

有很多的文體事我會也改變這一點。由於您的格式選擇，您的代碼非常難以閱讀。此外，還有很多不必要的重複代碼。如果我寫這個，我會縮短到以下幾點：

switch(document.getElementById("button1").value) { 
    case 'On': 
     // do stuff 
     break; 
    case 'Off': 
     // do stuff 
     break; 
    case 'Auto': 
     // do stuff 
     break; 
    default: 
     // probably an error condition; show message, maybe? 
     break; 
}

如果你真的需要開啓/關閉/自動按鈕的值，可以在case機構內部設置。

來源

2013-10-05 22:17:17

非常感謝此幫助。那天晚些時候，我發現了==問題。我不知道null，我將使用更清晰的代碼的建議。再次感謝你。 – ewjedi

很高興能幫到你！我推薦閱讀Douglas Crockford的JavaScript：The Good Parts（http://shop.oreilly.com/product/9780596517748.do）。 –

在此行中：
```
var onoffB =(); 
```
你需要或者刪除初始化或用別的東西代替括號。
在每個if聲明：
```
if (document.getElementById("button1").value="On") 
```
你設置的value，使得它總是如此。您可能想要使用==進行比較，而不是在此處指定=。
雖然它不是一個真正的問題而是可能的改進，我建議你把的document.getElementById結果在一個變量，所以你不必保持調用它。它本身應該相當快，但一次做它可能會更快。

來源

2013-10-05 22:17:02 icktoofay

下面是完整的工作和運行代碼：

<html> 
<head> 
<script type="text/javascript"> 
function cycle() 
{ 
    var onoffB = null; 
    if (document.getElementById("button1").value == "On") 
    { 
     onoffB = 1; 
     document.getElementById("button1").value = "Off"; 
    } 

    else if (document.getElementById("button1").value == "Off") 
    { 
     onoffB = 2; 
     document.getElementById("button1").value = "Auto"; 
    } 

    else if (document.getElementById("button1").value == "Auto") 
    { 
     onoffB = 0; 
     document.getElementById("button1").value = "On"; 
    } 

    switch(onoffB) 
     { 
      case 0: 
      //running code; 
      break; 
      case 1: 
      //running code; 
      break; 
      case 2: 
      //running code; 
      break; 
    } 
} 

</script> 
</head> 
<body> 

<input type="button" id="button1" value="On" onclick="cycle();"> 

</body> 
</html>

正如你所看到的，存在的主要問題是：

你設定VAR onoffB =（）;而它應該是空的。
您應該使用「==」而不是「=」。
當'值'爲'自動'時，缺少另一個'其他'。

我希望我幫助:-)

來源

2013-10-05 22:33:59 MrByte

嘗試是這樣的：

var doc = document, bod = doc.body; 
function E(e){ 
    return doc.getElementById(e); 
} 
var state = 'On'; 
function onOffAuto(element){ 
    var e = element; 
    switch(state){ 
    case 'On': 
     e.value = state = 'Off'; 
     return; 
    case 'Off': 
     e.value = state = 'Auto'; 
     return; 
    case 'Auto': 
     e.value = state = 'On'; 
     return; 
    } 
} 
E('button1').onclick = function(){ 
    onOffAuto(this); 
}

來源

2013-10-05 22:53:21 PHPglue

試圖做一個開/關/自動按鈕

回答

相關問題