Menu
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>
777
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.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
