Javascript 尝试根据单击的颜色btn更改动画

我正在使用引导单选按钮

当其中一个被选中时，我希望我的动画改变

我需要弄清楚如何通过这里的颜色来改变，这就是我目前在JS中所做的。我尝试使用for each循环，但keep get不是函数，或者在尝试获取一种显示颜色时出现未定义的错误

const showcase=document.querySelector（'.showcase'）；
const black=document.querySelector（'#black'）；
const white=document.querySelector（“#white”）；
const grey=document.querySelector（“#grey”）；
const yellow=document.querySelector（“#黄色”）；
const colorChoice=document.getElementById
让颜色=[colorChoice]；
控制台日志（颜色）；
//加载事件
loadEventListeners（）；
//大小和颜色事件
函数loadEventListeners（）{
color.addEventListener（'click'，colorChange）；
}
//变色
函数颜色变化（e）{
颜色。forEach（函数（颜色）{
如果（颜色=黑色）{
console.log（彩色）
console.log（'black'）
showcase.style.animation='blackjacket 6s infinite'；
showcase.style.animationTimingFunction='步骤（1，结束）'；
}否则如果（颜色=白色）{
console.log（'white'））
showcase.style.animation='whitejacket 6s infinite'；
showcase.style.animationTimingFunction='步骤（1，结束）'；
}否则如果（颜色=灰色）{
console.log（'grey'））
showcase.style.animation='greyjacket 6s infinite'；
showcase.style.animationTimingFunction='步骤（1，结束）'；
}否则如果（颜色=黄色）{
console.log（'yellow'）
showcase.style.animation='yellowjacket 6s infinite'；
showcase.style.animationTimingFunction='步骤（1，结束）'；
}else{}
e、 预防默认值（）；
});
}

.showcase{
宽度：764px；
身高：875px；
保证金：自动；
背景尺寸：包含；
背景位置：50%50%；
背景重复：无重复；
-webkit动画：blackjacket 6s无限；
动画：黑夹克6s无限；
-webkit动画计时功能：步骤（1，结束）；
动画计时功能：步骤（1，结束）；
}
@关键帧黑夹克{
/*黑色的*/
0% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/front.webp')
}
33.3% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/back.webp');
}
66.6% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/side.webp');
}
100% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/black%20jacket/side.webp');
}
}
@关键帧白夹克{
/*白色的*/
0% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/front.webp')
}
33.3% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/back.webp');
}
66.6% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/side.webp');
}
100% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/white%20jacket/side.webp');
}
}
@关键帧灰色夹克{
/*灰色的*/
0% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/front.webp')
}
33.3% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/back.webp');
}
66.6% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/side.webp');
}
100% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/grey%20jacket/side.webp');
}
}
@关键帧黄夹克{
/*黄色的*/
0% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/front.webp')
}
33.3% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/back.webp');
}
66.6% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/side.webp');
}
100% {
背景图像：url（'https://connorlewis128.github.io/ShoppingPage/Dist/images/new%20product/yellow%20jacket/side.webp');
}
}

选择颜色

下面是解释，但这里有一个工作代码笔：

首先，您需要某种启动更改过程的事件。它可以是一个循环，但事件是一种更干净的方式。因为您使用的是单选按钮，所以可以使用onClick事件，还需要添加一个值：

等

您的javascript函数如下所示：

函数colorChange（）{
showcase.style.animation=document.querySelector（'input[name=“colorradio”]：选中'）。值+6s infinite'；
}

queryselector根据名称和检查状态选择单选按钮，然后获取其值

---

在if语句中还使用了一个等号（=），这是一个语法错误。它应该是两个或三个等号。

非常感谢！我一直把我自己和for循环混淆，当它改变颜色时，它总是变成循环中的最后一种颜色。