javascripthtmlbuttononclickglobal

Change Button color onClick


I want my Button to change color every time I click on it. But it only changes color on the first click.

I believe the problem is in the setColor function. Every time I click on the Button, count gets set to 1. So even when I set it to 0, it gets reset to 1 on the next click. How do I fix this? Are there global variables in javascript/html where this would easily be solved?

<!DOCTYPE html>
<html>
<head>

<script>
function setColor(btn, color){
    var count=1;
    var property = document.getElementById(btn);
    if (count == 0){
        property.style.backgroundColor = "#FFFFFF"
        count=1;        
    }
    else{
        property.style.backgroundColor = "#7FFF00"
        count=0;
    }

}
</script>
</head>

<body>

<input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/>

</body>
</html>

Solution

  • There are indeed global variables in javascript. You can learn more about scopes, which are helpful in this situation.

    Your code could look like this:

    <script>
        var count = 1;
        function setColor(btn, color) {
            var property = document.getElementById(btn);
            if (count == 0) {
                property.style.backgroundColor = "#FFFFFF"
                count = 1;        
            }
            else {
                property.style.backgroundColor = "#7FFF00"
                count = 0;
            }
        }
    </script>
    

    Hope this helps.