Javascript 使用switch语句更改div背景色

请原谅超级初学者的麻烦，但我正在尝试使用javascript开关使div改变颜色。我确信这个问题与对参数如何工作的基本误解有关，但正如我所说，我是个新手。我没有收到任何错误，只是没有任何作用。还有，第一个帖子在这里，所以我道歉，如果我在我的帖子中做了任何不适当的事情

功能颜色变换器（颜色）{
开关（彩色）{
案例“红色”：
document.getElementById（“color_-box”）.style.backgroundColor=“red”；
打破
案例“橙色”：
document.getElementById（“color_-box”）.style.backgroundColor=“橙色”；
打破
案例“黄色”：
document.getElementById（“color_-box”）.style.backgroundColor=“黄色”；
打破
案例“绿色”：
document.getElementById（“color_-box”）.style.backgroundColor=“绿色”；
打破
案例“蓝色”：
document.getElementById（“color_-box”）.style.backgroundColor=“blue”；
打破
“靛蓝”一案：
document.getElementById（“color_box”）.style.backgroundColor=“indigo”；
打破
“紫罗兰”一案：
document.getElementById（“color_-box”）.style.backgroundColor=“violet”；
打破
}
}

@视口{
缩放：1.0；
宽度：设备宽度；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
#彩盒{
宽度：20雷姆；
高度：20雷姆；
边框：实心1px；
}

彩色按钮
红色
橙色
黄色的
绿色
蓝色
靛蓝
紫罗兰色

您需要在参数周围加引号，使其成为字符串

<button type="button" id="red" onclick="colorChanger('red')">Red</button>

由于这不等于

switch

语句中的任何情况，因此不会发生任何事情

顺便说一句，为什么要为switch语句而烦恼呢？只要做：

document.getElementById("color_box").style.backgroundColor = color;

---

您需要在参数周围加引号以使其成为字符串。否则，只需使用

this.id

功能颜色变换器（颜色）{
开关（彩色）{
案例“红色”：
document.getElementById（“color_-box”）.style.backgroundColor=“red”；
打破
案例“橙色”：
document.getElementById（“color_-box”）.style.backgroundColor=“橙色”；
打破
案例“黄色”：
document.getElementById（“color_-box”）.style.backgroundColor=“黄色”；
打破
案例“绿色”：
document.getElementById（“color_-box”）.style.backgroundColor=“绿色”；
打破
案例“蓝色”：
document.getElementById（“color_-box”）.style.backgroundColor=“blue”；
打破
“靛蓝”一案：
document.getElementById（“color_box”）.style.backgroundColor=“indigo”；
打破
“紫罗兰”一案：
document.getElementById（“color_-box”）.style.backgroundColor=“violet”；
打破
}
}

@视口{
缩放：1.0；
宽度：设备宽度；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
#彩盒{
宽度：20雷姆；
高度：20雷姆；
边框：实心1px；
}

彩色按钮
红色
橙色
黄色的
绿色
蓝色
靛蓝
紫罗兰色

您只需将颜色名称参数作为字符串传递，将所有颜色名称用单引号括起来，就像调用函数

colorChanger（'color'）

红色
橙色
黄色的
绿色
蓝色
靛蓝
紫罗兰色

您也可以使用jQuery：

$（“按钮”）。单击（函数（）{
var id=this.id
开关（id）{
案例“红色”：
$（'#color_box'）.css（'background-color'，'red'）；
打破
案例“橙色”：
$（'color#u box'）.css（'background-color'，'orange'）；
打破
案例“黄色”：
$（'#color_box'）.css（'background-color'，'yellow'）；
打破
案例“绿色”：
$（'#color_box'）.css（'background-color'，'green'）；
打破
案例“蓝色”：
$（'#color_box'）.css（'background-color'，'blue'）；
打破
“靛蓝”一案：
$（'#color_box'）.css（'background-color'，'indigo'）；
打破
“紫罗兰”一案：
$（'#color_box'）.css（'background-color'，'violet'）；
打破
}
});
@视口{
缩放：1.0；
宽度：设备宽度；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
#彩盒{
宽度：20雷姆；
高度：20雷姆；
边框：实心1px；
}

红色
橙色
黄色的
绿色
蓝色
靛蓝
紫罗兰色
所有这些东西都让我大吃一惊！我喜欢！
document.getElementById("color_box").style.backgroundColor = color;

    <button type="button" id="red" onclick="colorChanger('red')">Red</button>
    <button type="button" id="orange" onclick="colorChanger('orange')">Orange</button>
    <button type="button" id="yellow" onclick="colorChanger('yellow')">Yellow</button>
    <button type="button" id="green" onclick="colorChanger('green')">Green</button>
    <button type="button" id="blue" onclick="colorChanger('blue')">Blue</button>
    <button type="button" id="indigo" onclick="colorChanger('indigo')">Indigo</button>
    <button type="button" id="violet" onclick="colorChanger('violet')">Violet</button>