Trigger alert: Newbie question.

I'm trying to change the color of a button, starting as grey. On the first click, I want it to change to green, on the second click I want it to change to red and then toggle between green and red for each click.

The problem is I can't get it to work once it turned to green. If I manually set the start value to green in the code, then the else if works and turns the button to red, but not if I start with the grey button and click it to bee green.

How can I make it change to green on the first click, red on the second, then toggle between red and green for each click?

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; 

    }
}

And (it case it matters) the css class:

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

Note: There's probably better ways and other techniques to do this, but my purpose is to understand how this works (and why it doesn't work at the moment).

Trigger alert: Newbie question.

I'm trying to change the color of a button, starting as grey. On the first click, I want it to change to green, on the second click I want it to change to red and then toggle between green and red for each click.

The problem is I can't get it to work once it turned to green. If I manually set the start value to green in the code, then the else if works and turns the button to red, but not if I start with the grey button and click it to bee green.

How can I make it change to green on the first click, red on the second, then toggle between red and green for each click?

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; 

    }
}

And (it case it matters) the css class:

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

Note: There's probably better ways and other techniques to do this, but my purpose is to understand how this works (and why it doesn't work at the moment).

• javascript

Share Improve this question Follow asked Jun 30, 2017 at 12:02 Anders FlodqvistAnders Flodqvist 1711 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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" />

This would be a shorter version:

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

you need to change your condition

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

In simple ways, you can use an array and loop through the values.

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