HTML Button Count

Question

Im trying to implement a logic whereby each time I click the button the count alternates between 1 and 0. In the following code the count is always 0 as each time I press the button the function sets the count to 0. Please help me out and thanks in advance

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

May I ask what is `button.onclick` used for in your main function? What value does it return? — Rahul Sharma, Mar 27 '16 at 05:09

Ataur Rahman Munna · Accepted Answer · 2017-01-17T07:40:27.650

Declare count variable at global scope.

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

score 2 · Answer 2 · edited May 23 '17 at 12:24

Declare the button in global scope. And use the bitwise operator for toggling between 0 and 1 like this..

<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

score 1 · Answer 3 · answered Mar 27 '16 at 05:02

1

each time you click the button, main() is called. and each time you call main() you're setting count to 0 to start. Place count outside your function scope.

answered Mar 27 '16 at 05:02

Observer

455
2
8

score 1 · Answer 4 · answered Mar 27 '16 at 05:04

I agree with Ataur's answer but you might want to consider a bool for this use case as best practise.

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

score 1 · Answer 5 · answered Mar 27 '16 at 05:05

You should set the count to 0 outside of the function.

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

score 1 · Answer 6 · answered Mar 27 '16 at 05:11

You need to hook click event with button and alternate between 0 & 1 on click.

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

Further make sure that main function is called on when document is in ready state or put function call to main right above closing of body tag. Something like this

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

HTML Button Count

6 Answers6