使用1个函数和一个数组来控制很多按钮

Question

我在html文件中有很多关闭按钮，它们具有相同的操作。 所有按钮可以有 3 个值：开、关、中性 他们根据这些值改变背景颜色（开=绿色，关=红色和中性=灰色） 所以我尝试创建一个仅包含条目中按钮编号的函数（1 代表按钮 1，2 代表按钮 2 ...）

所以我使用一个数组，每个按钮有 1 个空间，每个空间有 4 个元素。 3 代表每个值（开、关或中性），1 代表保存实际值。

var tag1 = document.querySelector("#button1");
var tag2 = document.querySelector("#button2");

var tagvalues = [
{
    actif: "tag1",
    neutre: " ",
    anti: "pastag1",
    etatactuel: " ",
},
{
    actif: "tag2",
    neutre: " ",
    anti: "pastag2",
    etatactuel: " ",
},
]

tag1.addEventListener("click", updateBtn(1));
tag2.addEventListener("click", updateBtn(2));

function updateBtn(boutags)
{
    var tagselector = document.querySelector("#button" + boutags);
    if (tagselector.style.backgroundColor === "#FF0000") 
    {
        tag[boutags].etatactuel = tag[boutags].neutre;
        tagselector.style.backgroundColor = "#C0C0C0";
    } 
    else if(tagselector.style.backgroundColor === "#C0C0C0") 
    {
        tag[boutags].etatactuel = tag[boutags].actif;
        tagselector.style.backgroundColor = "#00FF00";
    } 
    else if(tagselector.style.backgroundColor === "#00FF00") 
    {
        tag[boutags].etatactuel = tag[boutags].anti;
        tagselector.style.backgroundColor = "#FF0000";
     
    }
}`

在此代码中，actif 是按钮打开时的值 关闭时反 中性时就是中性

C0C0C0 是按钮的默认颜色

我现在不知道为什么它不起作用。

Answer 1

您有 3 种按钮状态，它们都应该相互关联。 但是当按钮的背景颜色为 #C0C0C0 时。那么就没有办法改变它的背景颜色条件。 当按钮背景颜色为#C0C0C0时请更改或添加条件更改