CODEWITHSUNDEEP
javascripthtml
Salman Fazal
Salman Fazal

Reputation: 587

HTML Button Count

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>

Upvotes: 0

Views: 392

Answers (6)

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

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>

Upvotes: 3

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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

Upvotes: 2

Adnan Umer
Adnan Umer

Reputation: 3689

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>

Upvotes: 1

Julie Qiu
Julie Qiu

Reputation: 59

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>

Upvotes: 1

Philip Kirkbride
Philip Kirkbride

Reputation: 22879

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>

Upvotes: 1

Observer
Observer

Reputation: 463

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.

Upvotes: 1

Related Questions