Javascript 函数只工作一次，并按降序排列

我试图通过按另一个div来更改一个div的颜色，但它只能按降序运行一次。我几乎没有使用JavaScript的经验，所以我可能完全错了

document.getElementById('red').addEventListener('click', function () {
    document.querySelector('.farge').classList.add('transition-red');
    });

    document.getElementById('orange').addEventListener('click', function () {
    document.querySelector('.farge').classList.add('transition-orange');
    });

    document.getElementById('yellow').addEventListener('click', function () {
    document.querySelector('.farge').classList.add('transition-yellow');
    });

    document.getElementById('green').addEventListener('click', function () {
    document.querySelector('.farge').classList.add('transition-green');
    });

    document.getElementById('turquoise').addEventListener('click', function () {
    document.querySelector('.farge').classList.add('transition-turquoise');
    });

    document.getElementById('blue').addEventListener('click', function  () {
    document.querySelector('.farge').classList.add('transition-blue');
    });

    document.getElementById('purple').addEventListener('click', function  () {
    document.querySelector('.farge').classList.add('transition-purple');
    });

    document.getElementById('pink').addEventListener('click', function () {
    document.querySelector('.farge').classList.add('transition-pink');

以下是HTML：

<div id="farge-valg-panel">
            <table id="farge-table">
                <tr id="farge-tr">
                    <td id="red"></td>
                    <td id="orange"></td>
                </tr>
                <tr id="farge-tr">
                    <td id="yellow"></td>
                    <td id="green"></td>
                </tr>
                <tr id="farge-tr">
                    <td id="turquoise"></td>
                    <td id="blue"></td>
                </tr>
                <tr id="farge-tr">
                    <td id="purple"></td>
                    <td id="pink"></td>
                </tr>
            </table>
        </div>

        <div class="farge"></div>

    </div>

---

JavaScript将css广告到“farge”元素（我必须这样做，因为这是一个需要动画的学校项目）。

您需要删除其他类，否则它只能按照css的降序工作

功能切换颜色（颜色）{
const元素=document.querySelector（'.farge'）；
//恶魔全彩
element.classList.remove（'transition-red'）；
element.classList.remove（'transition-orange'）；
element.classList.remove（'transition-yellow'）；
element.classList.remove（'transition-green'）；
element.classList.remove（'transition-turquoise'）；
element.classList.remove（'transition-blue'）；
element.classList.remove（'transition-purple'）；
element.classList.remove（'transition-pink'）；
//启用特定颜色
元素。类列表。添加（颜色）；
}
document.getElementById（'red'）。addEventListener（'click'，function（）{
切换颜色（“过渡红”）；
});
document.getElementById（'orange'）。addEventListener（'click'，函数（）{
切换颜色（“过渡-橙色”）；
});
document.getElementById（'yellow'）。addEventListener（'click'，function（）{
切换颜色（“过渡黄色”）；
});
document.getElementById（'green'）。addEventListener（'click'，function（）{
切换颜色（“过渡绿色”）；
});
document.getElementById（'turquoise'）。addEventListener（'click'，function（）{
切换颜色（“过渡绿松石色”）；
});
document.getElementById（'blue'）。addEventListener（'click'，function（）{
切换颜色（“过渡蓝”）；
});
document.getElementById（'purple'）。addEventListener（'click'，function（）{
切换颜色（“过渡紫色”）；
});
document.getElementById（'pink'）。addEventListener（'click'，函数（）{
切换颜色（“过渡粉色”）；
}

你能为你的代码制作一个简单的可复制的例子，包括css和html吗？你能同时添加你的html代码吗？非常感谢。

    farge{
    transition-duration: 2s;
    grid-area: main;
    background-color: black;
}

.transition-red{
    background-color: red;
}

.transition-orange{
    background-color: orange;
}

.transition-yellow{
    background-color: yellow;
}

.transition-green{
    background-color: green;
}

.transition-turquoise{
    background-color: turquoise;
}

.transition-blue{
    background-color: blue;
}

.transition-purple{
    background-color: purple;
}

.transition-pink{
    background-color: pink;
}