2016-03-27 7 views
0

Im Versuch, eine Logik zu implementieren, wobei jedesmal, wenn ich auf die Schaltfläche klicke, die Zahl zwischen 1 und 0 wechselt. Im folgenden Code ist die Zählung immer 0, da jedes Mal, wenn ich die Taste drücke, die Funktion die Zahl auf 0 setzt . Bitte helfen Sie mir und dank im VorausHTML Button Count

<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

Darf ich fragen, was ist 'button.onclick' in Ihrer Hauptfunktion verwendet? Welchen Wert gibt es zurück? –

Antwort

3

count Variable im globalen Bereich erklären.

<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

jedes Mal, wenn Sie auf die Schaltfläche klicken, wird main() genannt. und jedes Mal, wenn Sie main() aufrufen, setzen Sie count auf 0, um zu starten. Platzieren Sie die Anzahl außerhalb Ihres Funktionsumfangs.

1

Ich stimme der Antwort von Ataur zu, aber Sie sollten vielleicht eine Bool für diesen Anwendungsfall als Best Practice betrachten.

<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

Sie sollten die Zählung auf 0 außerhalb der Funktion gesetzt.

<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

Deklarieren Sie die Schaltfläche im globalen Gültigkeitsbereich. Und verwenden Sie den bitweisen Operator zwischen 0 und 1, wie dies für Makeln ..

<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

Sie müssen zwischen 0 & 1 auf Klick mit Knopf und alternativen Klick-Ereignis einzuhaken.

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

Weitere sicherstellen, dass main Funktion aufgerufen wird, wenn document in ready Zustand oder Funktionsaufruf setzen zu main rechts oben Schließung body Tag. So etwas wie das

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