Menu
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>
507
asked Dec 22 '25 14:12
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;
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
