0

私はJavaScriptが初めてで、クリックするたびにオン/オフ/自動を繰り返すボタンを作成しようとしています。各状態では、if ステートメント内のコードとスイッチ内のコードも実行する必要があります。現在、正しく実行するために縫い合わせることができません。後でこれが機能するようになったら、「ifステートメント」関数を独自の.jsファイルに入れて、他のオン/オフ/自動ボタンで参照できるようにします。スイッチはメインコードの一部になります。私は何を間違っていますか？

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

4 に答える 4

3

さて、すぐにわかる大きな問題が 2 つあります。まず、次の構文は無効な 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-05T22:17:17.420 に答える
0

完全な動作および実行中のコードは次のとおりです。

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

ご覧のとおり、主な問題は次のとおりです。

  1. var onoffB = (); を設定します。null である必要があります。
  2. 「=」の代わりに「==」を使用する必要がありました。
  3. 値が「Auto」の場合、別の「else if」がありませんでした。

お役に立てば幸いです:-)

于 2013-10-05T22:33:59.757 に答える
0

  1. この行で：

    var onoffB = ();

    イニシャライザを削除するか、括弧を別のものに置き換える必要があります。

  2. あなたの各ifステートメントで：

    if (document.getElementById("button1").value="On")

    を設定しているため、value常に真になります。==ここで代入するのではなく、使用して比較したいでしょう=。

  3. これは実際には問題ではなく、改善の可能性がありますが、 の結果をdocument.getElementById変数に入れて呼び出し続ける必要がないようにすることをお勧めします。それ自体はかなり速いはずですが、一度実行するとおそらく速くなります。

于 2013-10-05T22:17:02.273 に答える
0

次のようなことを試してください：

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-05T22:53:21.607 に答える