Changing HTML button text color multiple times with JS function

Question

0.00/5 (No votes)

See more:

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 accomplish 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. The initial text color is set inline in the button's tag.

What I have tried:

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]

Turns out the color check couldn't be performed because I had neglected to properly set it to begin with. The following code was recommended to me and works perfectly:

JavaScript

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

function changeColor(alphaButton) {
  var current = alphaButton.dataset.ci || 0;
  current = (current + 1) % colors.length;
  alphaButton.dataset.ci = current;
  alphaButton.style.color = colors[current];
}

Posted 7-Jun-18 13:56pm

Member 13835151

Updated 7-Jun-18 18:33pm

v4

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Patrice T · Answer 1 · 2018-06-07T14:06:00

= is to assign a value
== or === is to compare
Try

JavaScript

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"; 
    }
}

JavaScript Comparison and Logical Operators[^]
[Update]
Add this as first line of function

JavaScript

tmp=alphaButton.style.color;

and go to your browser web console and use the debugger to see what you code is doing.
And pay attention to the value of tmp, make sure it is what you expect. You may discover that your color names are wrong.
JavaScript Debugging[^]
Chrome DevTools | Web | Google Developers[^]

Mohibur Rashid · Answer 2 · 2018-06-07T18:34:00

Or you can put this in array and remember the index of the color.

<input type=button data-colors="red green blue yellow gold" daya-index=0 style="color:red" onclick='pricessColor(this)'>

function pricessColor(me) {
 let index=me.getAttribute("data-index")+1;
 let colorArr=me.getAttribute("data-colors").split(" ");
 if(colorArr.length<=index){
  index=0
 }
 me.style.color=colorArr[index];
 me.setAttribute("data-index", index);
}

I thought it would be fun.

Changing HTML button text color multiple times with JS function

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0