Javascript 单击后更改按钮颜色_Javascript_Html_Button_Onclick_Global

Javascript 单击后更改按钮颜色

javascript html button

Javascript 单击后更改按钮颜色,javascript,html,button,onclick,global,Javascript,Html,Button,Onclick,Global,我希望我的按钮每次单击时都能更改颜色。但它只会在第一次单击时更改颜色我相信问题出在setColor函数中。每次我点击按钮，计数设置为1。因此，即使我将其设置为0，它也会在下次单击时重置为1。我该如何解决这个问题？javascript/html中是否存在容易解决此问题的全局变量 <!DOCTYPE html> <html> <head> <script> function setColor(btn, color){ var count=1

我希望我的

按钮每次单击时都能更改颜色。但它只会在第一次单击时更改颜色
我相信问题出在setColor
函数中。每次我点击按钮
，计数
设置为1。因此，即使我将其设置为0，它也会在下次单击时重置为1。我该如何解决这个问题？javascript/html中是否存在容易解决此问题的全局变量
<!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>


功能设置颜色（btn，颜色）{
var计数=1；
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“#FFFFFF”
计数=1；
}
否则{
property.style.backgroundColor=“#7FFF00”
计数=0；
}
}
每次点击setColor
时，您都将count设置为1。您需要在函数范围之外定义count
。例如：
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;
    }

}

javascript中确实存在全局变量。您可以了解有关的更多信息，这些信息在这种情况下很有帮助
您的代码可能如下所示：
<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>


var计数=1；
功能设置颜色（btn，颜色）{
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“#FFFFFF”
计数=1；
}
否则{
property.style.backgroundColor=“#7FFF00”
计数=0；
}
}

希望这能有所帮助。
1
function setColor(e) {
  var target = e.target,
      count = +target.dataset.count;

   target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF';
   target.dataset.count = count === 1 ? 0 : 1;
   /* 

   () : ? - this is conditional (ternary) operator - equals 

   if (count === 1) {
      target.style.backgroundColor = "#7FFF00";
      target.dataset.count = 0;
   } else {
      target.style.backgroundColor = "#FFFFFF";
      target.dataset.count = 1;
   } 
   target.dataset - return all "data attributes" for current element, 
   in the form of object, 
   and you don't need use global variable in order to save the state 0 or 1
  */ 
}


<input 
  type="button" 
  id="button" 
  value="button" 
  style="color:white" 
  onclick="setColor(event)"; 
  data-count="1" 
/>

函数setColor（e）{
var目标=e.target，
count=+target.dataset.count；
target.style.backgroundColor=count==1？”#7FFF00:“#FFFFFF”；
target.dataset.count=count==1？0:1；
/* 
（）：？-这是条件（三元）运算符-等于
如果（计数==1）{
target.style.backgroundColor=“#7FFF00”；
target.dataset.count=0；
}否则{
target.style.backgroundColor=“#FFFFFF”；
target.dataset.count=1；
} 
target.dataset-返回当前元素的所有“数据属性”，
以客体的形式,，
您不需要使用全局变量来保存状态0或1
*/ 
}

二,
函数setColor（e）{
var目标=e.target，
status=e.target.classList.contains（'active'）；
e、 target.classList.add（状态？'inactive'：'active'）；
e、 target.classList.remove（状态？'active'：'inactive'）；
}
.主动{
背景色：#7FFF00；
}
.不活跃{
背景色：#FFFFFF；
}



使用jquery，试试这个。
如果您的按钮id为say id=clickme
$（“clickme”）.on（'çlick'，function（）{
$（this.css（'background-color'，'grey'）；
….是，将var count=1移动到函数之前，它将是全局的。
function setColor(e) {
   var target = e.target,
       status = e.target.classList.contains('active');

   e.target.classList.add(status ? 'inactive' : 'active');
   e.target.classList.remove(status ? 'active' : 'inactive'); 
}

.active {
  background-color: #7FFF00;  
}

.inactive {
  background-color: #FFFFFF;
}

<input 
  type="button" 
  id="button" 
  value="button" 
  style="color:white" 
  onclick="setColor(event)" 
/>