2016-03-27 7 views
0

私はボタンをクリックするたびに1から0の間を交互に繰り返すロジックを実装しようとしています。次のコードでは、ボタンを押すたびにカウントが常に0になります。私に手伝ってくれてありがとう。HTMLボタンの数

<html> 
<head> 
<script type="text/javascript"> 
    function main(){ 

     var button = document.getElementById('button'); 

     count = 0; 

     if(button.onclick && count == 0){ 
      alert(count); 
      count = 1; 
     } 

     else if(button.onclick && count == 1){ 
      alert(count); 
      count = 0; 
     } 

    } 
</script> 
</head> 

<body> 
    <button type="button" id="button" onclick="main()">Click Me!</button> 
</body> 
</html> 
+0

ような何かが私は 'あなたの主な機能にするために使用さbutton.onclick'何聞いても?それはどんな価値をもたらしますか? –

答えて

3

count変数をグローバルスコープで宣言してください。

<html> 
 
    <head> 
 
    <script type="text/javascript"> 
 
     var count = 0; 
 
     function main(){ 
 
    
 
      var button = document.getElementById('button'); 
 
      if(button.onclick && count == 0){ 
 
       alert(count); 
 
       count = 1; 
 
      } 
 
    
 
      else if(button.onclick && count == 1){ 
 
       alert(count); 
 
       count = 0; 
 
      } 
 
    
 
     } 
 
    </script> 
 
    </head> 
 
    
 
    <body> 
 
     <button type="button" id="button" onclick="main()">Click Me!</button> 
 
    </body> 
 
    </html>

1

あなたがメインボタンを、(クリックするたび)と呼ばれています。 main()を呼び出すたびにカウントを0に設定して開始します。関数スコープの外に数を置きます。

1

私はAtaurの答えに同意しますが、ベストプラクティスとしてこのユースケースのブール値を考慮するとよいでしょう。

<html> 
<head> 
<script type="text/javascript"> 
    var buttonIsOn = true; 
    function main(){ 

     var button = document.getElementById('button'); 

     if(button.onclick && buttonIsOn){ 
      alert("turning button off"); 
      buttonIsOn = false; 
     } 

     else { // no need to check again if using bool 
      alert("turning button on"); 
      buttonIsOn = true; 
     } 

    } 
</script> 
</head> 

<body> 
    <button type="button" id="button" onclick="main()">Click Me!</button> 
</body> 
</html> 
1

機能の外でカウントを0に設定する必要があります。

<html> 
    <head> 
     <script type="text/javascript"> 
      var count = 0; 
      function main(){ 

       var button = document.getElementById('button'); 


       if(button.onclick && count == 0){ 
        alert(count); 
        count = 1; 
       } 

       else if(button.onclick && count == 1){ 
        alert(count); 
        count = 0; 
       } 

      } 
     </script> 
     </head> 

     <body> 
      <button type="button" id="button" onclick="main()">Click Me!</button> 
     </body> 
     </html> 
2

は、グローバルスコープでボタンを宣言します。そして、このように0と1の間を切り替えるためのビット演算子を使用し...

<script type="text/javascript"> 
    var count = 0; //global scope 

    function main(){  
     var button = document.getElementById('button');    
     if(button.onclick){ 
      alert(count); 
      count ^= 1; //bitwise operator 
     }  
    } 
</script> 

^(Bitwise XOR) as a I/O toggler

1

あなたはクリックで0 & 1の間のボタンと代替してクリックイベントをフックする必要があります。

function main() { 

    var button = document.getElementById('button'); 

    var count = 0; 
    button.addEventListener("click", function() { 
     if (count == 0) { 
      alert(count); 
      count = 1; 
     } 
     else if (count == 1) { 
      alert(count); 
      count = 0; 
     } 
    }); 
} 

はさらにmain機能がdocumentready状態にあるときに呼び出されるか、右bodyタグの閉鎖の上mainに関数呼び出しを入れていることを確認してください。この

<body> 
    <button type="button" id="button" >Click Me!</button> 
    <script> 
     main(); 
    </script> 
</body>