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

时间：2017-11-07 19:03:13

标签： javascript html dom switch-statement

请原谅超级初学者的麻烦，但我正在尝试使用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>

4 个答案:

答案 0 :(得分：10)

你需要在参数周围加引号以使它们成为字符串。

<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;

答案 1 :(得分：1)

你需要在参数周围引用它们以使它们成为字符串。否则，只需使用this.id

传递ID

＆＃13;
＆＃13; 
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;		
	}
}
＆＃13; 
@viewport {
    zoom: 1.0;
    width: device-width;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#color_box {
	width: 20rem;
	height: 20rem;
	border: solid 1px;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

正如@Barmar所说，为什么要烦恼切换声明？只是做：

document.getElementById("color_box").style.backgroundColor = color;喜欢这个

＆＃13;
＆＃13; 
function colorChanger(color) {
  document.getElementById("color_box").style.backgroundColor = color;
}
＆＃13; 
@viewport {
  zoom: 1.0;
  width: device-width;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#color_box {
  width: 20rem;
  height: 20rem;
  border: solid 1px;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您也可以使用jQuery：

＆＃13;
＆＃13; 
	$('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;

		}
	});
＆＃13; 
	@viewport {
		zoom: 1.0;
		width: device-width;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	#color_box {
		width: 20rem;
		height: 20rem;
		border: solid 1px;
	}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您只需要将颜色名称参数作为字符串传递，使用单引号包装所有颜色名称，例如调用函数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>
相关问题
最新问题