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

在按钮javascript上切换颜色

3 个答案: