CODEWITHSUNDEEP
javascripthtmldomswitch-statement
V1xIII
V1xIII

Reputation: 189

Changing div background color using switch statement

Pardon the super-beginner troubles, but I'm trying to make a div change color using a javascript switch. I'm sure the issue has something to do with a fundamental misunderstanding of how parameters work, but as I said, I'm a newbie. I don't get any errors, it just doesn't do anything. Also, first post here, so I apologize if I did anything improper in my post.

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>

Upvotes: 2

Views: 6600

Answers (4)

kasia
kasia

Reputation: 298

You can also use 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>

Upvotes: 1

Shankar
Shankar

Reputation: 3088

You just need to pass color name parameters as a string, Wrap all the color names with single quotes like while calling function 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>

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

You need quotes around the arguments to make them strings. Otherwise just pass the id using this.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>

And as @Barmar says why bother with the switch statement? Just do:

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

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>

Upvotes: 1

Barmar
Barmar

Reputation: 781741

You need quotes around the arguments to make them strings.

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

Without quotes, it's looking for a variable named red.

The reason you didn't get an error is because the colors are the same as the IDs of the buttons, and IDs all become global variables that refer to the corresponding DOM elements. So it's acting like you wrote:

onclick="colorChanger(document.getElementById('red'))"

Since this isn't equal to any of the cases in the switch statement, nothing happens.

BTW, why bother with the switch statement? Just do:

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

Upvotes: 11

Related Questions