Javascript 交换颜色功能中的参数问题（用于按钮）

对于HTML按钮：

<button type="button" id="100">100%</button>

很好。但是我想创建更多的按钮，不想每次都复制相同的功能。因此，为了使它更简单，我编写了一个函数，它将接受参数，比如说“b”（对于按钮），“c1”和“c2”（对于颜色），以及“x”——表示“n”值（对于每个按钮）。因此，我的java脚本（用于HTML按钮）带有两个按钮的示例集

const but1 = document.getElementById("button");

n=0;

function colorSwitch (b, c1, c2, x){
    if (x==0) {
        b.style.backgroundColor = c1;
        x=1;
    } else {
        b.style.backgroundColor = c2;
        x=0;
    }
}

// orange set

const cOrange = "rgb(225, 165, 0)";
const cOrangeT = "rgb(225, 165, 0,0)";

but1.addEventListener("click", function(){
    colorSwitch(but1, cOrange, cOrangeT, n);
});

我遇到的问题是“x”参数。它似乎获取初始“0”值，然后将其设置为“1”。但当我再次单击按钮时，初始值再次为“0”。因此没有循环，颜色也不会互换

我对x的行为有什么不理解，以及如何正确编码？

请参考Roko C.Buljan提供的。我不知道浏览器可以返回与元素中存储的字符串不同的字符串

您可以完全不使用该参数。在切换功能中，对按钮的当前状态进行比较：

function colorSwitch (b, c1, c2){
    if (b.style.backgroundColor === c1) {
        b.style.backgroundColor = c2;
    } else {
        b.style.backgroundColor = c1;
    }
}

到

使用CSS类和

classList.Toggle（）切换样式
使用公共类（即：
class=“btnTog”
）作为所有目标按钮的选择器。

改为使用
Element.classList.toggle（）
切换一个
处于活动状态的
CSS类：


函数colorwitch（）{
this.classList.toggle（'is-active'）；
}
const btns=document.queryselectoral（“.btnTog”）；
forEach（btn=>btn.addEventListener（'click'，colorwitch））
.btnTog{
边界：0；
填充：0.5em；
背景色：rgba（225,165,0,0.5）；
}
.处于活动状态{
背景色：rgba（255、180、0、1）
}
100%
100%
您永远不会更改
n
的值，该值是作为colorSwitch中的参数发送的。该值会更改，但不会“保存”它-因此，当第二次单击时，它不会从“1”开始，而是从“0”开始。基本值（如数字）是通过值传递的，而不是通过引用传递的。这意味着当您调用
colorSwitch
时，
x
将是
n
的副本。然后，您正在更改
x
而不是
n
，因为
x
在
colorSwitch
函数返回后不再存在，因此该更改无效。PS
rgb（225，165，0，0）
是无效颜色，请使用Alpha通道：
rgba（225，165，0，0）
PS
getElementById（“按钮”）
您没有这样的ID element.pro，谢谢。实际上切换比在java脚本中更改背景要好的原因是它不会以这种方式永久更改背景。所以，当我试图在按钮上设置：hover状态时，java脚本需要使用.style属性设置背景。唯一的问题是，按钮的颜色会有所不同（因此代码必须稍微修改）@bartc为什么你在问题中没有提到不同的颜色？：）我唯一能看到的是两个变量中的两种颜色。按钮的默认颜色是否不同？@bartc您接受了错误的答案，但回答者不知道，如果（El.style.backgroundColor==='some color'，您永远不应该依赖
if（El.style.backgroundColor==='some color'））
因为返回的值完全取决于浏览器，并且可能会意外地与您期望的颜色值和格式不匹配。Roko对于您的anwser，非常有用，专业。这对我来说也是一所很好的学校，因为你在代码中使用的概念和你的技能，Vanjas anwser实际上解决了我的难题（即使它有缺陷）。但你是对的，你的回答水平值得接受。再次感谢您的时间，从这么多方面来看，这是错误的。浏览器将返回他想要的任何字符串。您不能可靠地使用
==
，尤其是在格式错误的输入字符串上。@RokoC.Buljan-您能解释一下吗？为什么浏览器会返回任何字符串？为什么我们不能依赖于
==
？@bartc看看这个提琴：例如，在Chrome中，使用
color
变量，你会看到你总是会得到一个用
rgb
单位翻译的结果，因此，在预期的输入颜色字符串上使用
=
匹配该结果是不可靠的。@bartc解决方案是创建一个函数，创建inmemory元素，为该元素指定字符串输入颜色值，然后才比较两种div颜色-可靠，因为现在这两个值都将由浏览器转换，并最终保持完全匹配。@bartc这取决于浏览器。还有很多。是的，Alpha设置为
1
的
rgba
将被转换为
rgb
，因为Alpha设置为最大不透明度
1
——但这是Chrome（幸运的是大多数现代浏览器）。但是在旧的边缘打开上面的提琴，或者在IE11中运行代码，可以看到更奇怪的结果。即使在现代浏览器中，也能保证Alpha永远被忽略吗？我们能保证空间总是被使用吗？
function colorSwitch (b, c1, c2){
    if (b.style.backgroundColor === c1) {
        b.style.backgroundColor = c2;
    } else {
        b.style.backgroundColor = c1;
    }
}