【问题标题】：Changing div background color using switch statement使用 switch 语句更改 div 背景颜色
【发布时间】：2017-11-07 19:03:12
【问题描述】：
请原谅超级初学者的麻烦，但我正在尝试使用 javascript 开关使 div 更改颜色。我确信这个问题与对参数如何工作的基本误解有关，但正如我所说，我是新手。我没有收到任何错误，它什么也没做。另外，第一次在这里发帖，如果我在帖子中做任何不当之处，我深表歉意。
function colorChanger(color) {
switch(color) {
case "red":
document.getElementById("color_box").style.backgroundColor = "red";
break;
case "orange":
document.getElementById("color_box").style.backgroundColor = "orange";
break;
case "yellow":
document.getElementById("color_box").style.backgroundColor = "yellow";
break;
case "green":
document.getElementById("color_box").style.backgroundColor = "green";
break;
case "blue":
document.getElementById("color_box").style.backgroundColor = "blue";
break;
case "indigo":
document.getElementById("color_box").style.backgroundColor = "indigo";
break;
case "violet":
document.getElementById("color_box").style.backgroundColor = "violet";
break;
}
}
@viewport {
zoom: 1.0;
width: device-width;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#color_box {
width: 20rem;
height: 20rem;
border: solid 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Color Buttons</title>
<link rel="stylesheet" type="text/css" href="./color_buttons.css">
<script src="color_buttons.js"></script>
</head>
<body>
<div id="color_box">
</div>
<div id="button_box">
<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>
</div>
</body>
</html>
【问题讨论】：
标签：
javascript
html
dom
switch-statement
【解决方案1】：
您需要在参数周围加上引号以使它们成为字符串。
<button type="button" id="red" onclick="colorChanger('red')">Red</button>
没有引号，它正在寻找一个名为red 的变量。
之所以没有报错，是因为颜色和按钮的 ID 相同，而 ID 都变成了全局变量，指向对应的 DOM 元素。所以它就像你写的那样：
onclick="colorChanger(document.getElementById('red'))"
由于这不等于 switch 语句中的任何情况，所以什么都不会发生。
顺便说一句，为什么要打扰 switch 语句？做吧：
document.getElementById("color_box").style.backgroundColor = color;
【解决方案2】：
您需要在参数周围加上引号以使它们成为字符串。否则，只需使用 this.id 传递 id
function colorChanger(color) {
switch(color) {
case "red":
document.getElementById("color_box").style.backgroundColor = "red";
break;
case "orange":
document.getElementById("color_box").style.backgroundColor = "orange";
break;
case "yellow":
document.getElementById("color_box").style.backgroundColor = "yellow";
break;
case "green":
document.getElementById("color_box").style.backgroundColor = "green";
break;
case "blue":
document.getElementById("color_box").style.backgroundColor = "blue";
break;
case "indigo":
document.getElementById("color_box").style.backgroundColor = "indigo";
break;
case "violet":
document.getElementById("color_box").style.backgroundColor = "violet";
break;
}
}
@viewport {
zoom: 1.0;
width: device-width;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#color_box {
width: 20rem;
height: 20rem;
border: solid 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Color Buttons</title>
<link rel="stylesheet" type="text/css" href="./color_buttons.css">
<script src="color_buttons.js"></script>
</head>
<body>
<div id="color_box">
</div>
<div id="button_box">
<button type="button" id="red" onclick="colorChanger(this.id)">Red</button>
<button type="button" id="orange" onclick="colorChanger(this.id)">Orange</button>
<button type="button" id="yellow" onclick="colorChanger(this.id)">Yellow</button>
<button type="button" id="green" onclick="colorChanger(this.id)">Green</button>
<button type="button" id="blue" onclick="colorChanger(this.id)">Blue</button>
<button type="button" id="indigo" onclick="colorChanger(this.id)">Indigo</button>
<button type="button" id="violet" onclick="colorChanger(this.id)">Violet</button>
</div>
</body>
</html>
正如@Barmar 所说，为什么要打扰 switch 语句？做吧：
document.getElementById("color_box").style.backgroundColor = color;这样的
function colorChanger(color) {
document.getElementById("color_box").style.backgroundColor = color;
}
@viewport {
zoom: 1.0;
width: device-width;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#color_box {
width: 20rem;
height: 20rem;
border: solid 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Color Buttons</title>
<link rel="stylesheet" type="text/css" href="./color_buttons.css">
<script src="color_buttons.js"></script>
</head>
<body>
<div id="color_box">
</div>
<div id="button_box">
<button type="button" id="red" onclick="colorChanger(this.id)">Red</button>
<button type="button" id="orange" onclick="colorChanger(this.id)">Orange</button>
<button type="button" id="yellow" onclick="colorChanger(this.id)">Yellow</button>
<button type="button" id="green" onclick="colorChanger(this.id)">Green</button>
<button type="button" id="blue" onclick="colorChanger(this.id)">Blue</button>
<button type="button" id="indigo" onclick="colorChanger(this.id)">Indigo</button>
<button type="button" id="violet" onclick="colorChanger(this.id)">Violet</button>
</div>
</body>
</html>
【解决方案3】：
你也可以使用jQuery：
$('button').click(function(){
var id = this.id
switch(id){
case "red":
$('#color_box').css('background-color', 'red');
break;
case "orange":
$('#color_box').css('background-color', 'orange');
break;
case "yellow":
$('#color_box').css('background-color', 'yellow');
break;
case "green":
$('#color_box').css('background-color', 'green');
break;
case "blue":
$('#color_box').css('background-color', 'blue');
break;
case "indigo":
$('#color_box').css('background-color', 'indigo');
break;
case "violet":
$('#color_box').css('background-color', 'violet');
break;
}
});
@viewport {
zoom: 1.0;
width: device-width;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#color_box {
width: 20rem;
height: 20rem;
border: solid 1px;
}
<div id="color_box">
</div>
<div id="button_box">
<button type="button" id="red">Red</button>
<button type="button" id="orange">Orange</button>
<button type="button" id="yellow">Yellow</button>
<button type="button" id="green">Green</button>
<button type="button" id="blue">Blue</button>
<button type="button" id="indigo">Indigo</button>
<button type="button" id="violet">Violet</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
【解决方案4】：
您只需将颜色名称参数作为字符串传递，将所有颜色名称用单引号括起来，就像在调用函数colorChanger('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>