javascript - 切换按钮 javascript 的颜色

Question

触发警报:新手问题。

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

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

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

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

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" />