I am attempting to create a function that will change the text color of a button in a sequence - red on the first click, green on the second click, and back to black on the third click (and so forth). I thought this would be straightforward to achieve with an if else statement that checks the current color of the button. I have managed to successfully change the color on the initial click, but subsequent clicks do not produce any results. Each button has an onclick attribute calling the function as follows:
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 is functioning correctly, but it seems to stop working after the initial step. I would appreciate any assistance in resolving this issue.
[UPDATE]
After further investigation, I discovered the problem with my code. It turns out that I had not properly defined the text color (despite believing I had done so inline). After correcting this, the functionality now works perfectly. However, I was surprised to learn that specifying black text explicitly was necessary for it to appear as such. This experience has been frustrating but educational.