使用JS功能多次更改HTML按钮文本的颜色 [英] Changing HTML button text color multiple times with JS function

问题描述

我正在尝试编写一个函数，该函数会将按钮的文本颜色在第一次单击时变为红色，在第二次单击时变为绿色，而在第三次单击时又变为黑色(依此类推).我的想法是，使用if else语句检查按钮的颜色然后对其进行更改，应该可以非常简单地完成此操作.第一次点击时，我已经改变了颜色，但是下次点击时似乎看不到任何结果.初始文本颜色在按钮的标记中内联设置.

我尝试过的事情:

到目前为止，我有一系列包含onclick ="changeColor(this)的按钮，并调用:

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

if语句可以正常工作，但是我不确定为什么它不能正常工作.任何帮助将不胜感激！

[更新]

事实证明无法执行颜色检查，因为我忽略了正确设置它的开始.向我推荐了以下代码，它们非常有效:

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:

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

推荐答案

=是要分配一个值
==或===是要比较
试试

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

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比较和逻辑运算符 [

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

tmp=alphaButton.style.color;

并转到浏览器Web控制台，并使用调试器查看您的代码在做什么.
并注意tmp的价值，确保它是您所期望的. 您可能会发现您的颜色名称有误.
JavaScript调试 [ ^ ]
Chrome DevTools  | 网页||  Google Developers [^ ]

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[^]

或者您可以将其放在数组中并记住颜色的索引.

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.

这篇关于使用JS功能多次更改HTML按钮文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！