在按钮javascript上切换颜色

Question

触发警报：新手问题。

我正在尝试更改按钮的颜色，从灰色开始。 第一次单击时，我希望它变为绿色，第二次单击时，我希望它变为红色，然后每次单击都在绿色和红色之间切换。

问题是，一旦变成绿色，我就无法工作。 如果我在代码中手动将起始值设置为绿色，则else可以工作并将按钮变为红色，但是如果我从灰色按钮开始并单击以使其变为绿色，则不会。

如何使它在第一次单击时变为绿色，在第二次单击时变为红色，然后为每次单击在红色和绿色之间切换？

HTML：

    <input type="button" id="button1" class="button" onclick="colorChange()" value="Click Here" />

javascript：

    function    colorChange() {
var button = document.getElementById('button1').style.backgroundColor;  
var color = '';

if (color !== 'green') {
    color = 'green';
    document.getElementById('button1').style.backgroundColor = color;       

    }
else if (color == 'green') {
    color = 'red';
    document.getElementById('button1').style.backgroundColor = color; 

    }
}

和（这很重要）css类：

    .button {
background-color: #909090;
color: #d3d3d3;
font-size: 16px;
padding: 10px 20px;
border-radius: 10px;
border: 0px;
}

注意：可能有更好的方法和其他方法来执行此操作，但是我的目的是了解它的工作原理（以及为什么当前不起作用）。

Answer 1

你需要改变你的状况

 function colorChange() { var button = document.getElementById('button1').style.backgroundColor; var color = ''; if (button !== 'green') { color = 'green'; document.getElementById('button1').style.backgroundColor = color; } else if (button === 'green') { color = 'red'; document.getElementById('button1').style.backgroundColor = color; } } 

  .button { background-color: #909090; color: #d3d3d3; font-size: 16px; padding: 10px 20px; border-radius: 10px; border: 0px; } 

 <input type="button" id="button1" class="button" onclick="colorChange()" value="Click Here" /> 

Answer 2

 var button = document.getElementById('button1'); var color = button.style.backgroundColor; button.addEventListener('click', function () { // this function executes whenever the user clicks the button color = button.style.backgroundColor = color === 'green' ? 'red' : 'green'; }); 

 .button { background-color: #909090; color: #d3d3d3; font-size: 16px; padding: 10px 20px; border-radius: 10px; border: 0px; } 

 <input type="button" id="button1" class="button" value="Click Here" /> 

这将是一个较短的版本：

 document.getElementById('button1').addEventListener('click', function () { this.style.backgroundColor = this.style.backgroundColor === 'green' ? 'red' : 'green'; }); 

 .button { background-color: #909090; color: #d3d3d3; font-size: 16px; padding: 10px 20px; border-radius: 10px; border: 0px; } 

 <input type="button" id="button1" class="button" value="Click Here" /> 

Answer 3

您可以通过简单的方式使用数组并遍历所有值。

 i = -1; var bg = ["green", "red"]; function colorChange(which) { which.style.backgroundColor = bg[i++ % bg.length]; } 

 .button { background-color: #999; color: #d3d3d3; font-size: 16px; padding: 10px 20px; border-radius: 10px; border: 0px; } 

 <input type="button" id="button" class="button" onclick="return colorChange(this);" value="Click Here" />