I am trying to write a function that will change a button's text color to red on the first click, green on the second click and back to black on the third click (and so forth). My idea is that this should be fairly straightforward to acplish with an if else statement that checks a button's color and then changes it. I've gotten the color to change on the first click just fine but I don't seem to be able to get any kind of result on the next clicks. So far I have a series of buttons that contain onclick = "changeColor(this) and call:

function changeColor(alphaButton) {
  if (alphaButton.style.color == "black") {
    alphaButton.style.color = "red";
  } else if (alphaButton.style.color == "red") {
    alphaButton.style.color = "green";
  } else if (alphaButton.style.color == "green") {
    alphaButton.style.color = "black";
  }
}

The if statement works fine but I'm not sure why it's not working past that. Any help would be greatly appreciated!

[UPDATE]

Ok, figured this one out. It appears I hadn't properly set my text color (although I thought I had it properly set inline). Now everything functions perfectly. Still, I would have assumed that black text would automatically read as black text without being specified as such. Definitely a frustrating and time consuming way to learn that this isn't the case.

I am trying to write a function that will change a button's text color to red on the first click, green on the second click and back to black on the third click (and so forth). My idea is that this should be fairly straightforward to acplish with an if else statement that checks a button's color and then changes it. I've gotten the color to change on the first click just fine but I don't seem to be able to get any kind of result on the next clicks. So far I have a series of buttons that contain onclick = "changeColor(this) and call:

function changeColor(alphaButton) {
  if (alphaButton.style.color == "black") {
    alphaButton.style.color = "red";
  } else if (alphaButton.style.color == "red") {
    alphaButton.style.color = "green";
  } else if (alphaButton.style.color == "green") {
    alphaButton.style.color = "black";
  }
}

The if statement works fine but I'm not sure why it's not working past that. Any help would be greatly appreciated!

[UPDATE]

Ok, figured this one out. It appears I hadn't properly set my text color (although I thought I had it properly set inline). Now everything functions perfectly. Still, I would have assumed that black text would automatically read as black text without being specified as such. Definitely a frustrating and time consuming way to learn that this isn't the case.

• javascript
• html
• css

• 4 = is assignment ... you want == in the test – Jaromanda X Commented Jun 7, 2018 at 23:54
• 1 May be of interest: Yoda conditions. – Jonathan Lonowski Commented Jun 7, 2018 at 23:58
• That totally makes sense, but replacing = with == breaks even the first click. I guess the check I thought I was making isn't happening at all and I was just assigning the button to black? Not exactly sure what's going on here... – Itai Yasur Commented Jun 7, 2018 at 23:59
• 1 Is the button's 1st color set in the element's style attribute or through a stylesheet? – Possibly related: How to retrieve the display property of a DOM element? – Jonathan Lonowski Commented Jun 8, 2018 at 0:02
• It's inline on the element. – Itai Yasur Commented Jun 8, 2018 at 0:04

3 Answers 3

It's remended in general not to rely on reading back style properties. Besides the fact that the button's initial style.color will be blank unless set manually, the color could've been set to #000, which has the same effect but will break your code.

Here's how I'd do this:

const colors = ["black", "red", "orange", "green", "blue"];

function changeColor(button) {
  var current = Number(button.dataset.ci || 0); // init to 0 on first click
  current = (current + 1) % colors.length; // clamp array index
  button.dataset.ci = current; // store new value in element
  button.style.color = colors[current]; // set color
}

<button onclick="changeColor(this)">Click</button>

In the if else conditions, you need to pare color style and the color string with === operator instead. You're using =, which is an assignment operator.

You are assigning variables in your if statement. Change to:

function changeColor(alphaButton) {
    if (alphaButton.style.color == "black") {
        alphaButton.style.color = "red"; 
    } else if (alphaButton.style.color == "red") {
        alphaButton.style.color = "green"; 
    } else if (alphaButton.style.color == "green") {
        alphaButton.style.color = "black"; 
    }
}