I am still new to JS and tried implementing a switch statement to change a HTML button color. Debugging console however throws
Uncaught Syntax Error – Unexpected Token case.
I have seen several syntax examples and similar stackoverflow questions, but it seems like I did everything else right; the inefficient if-else statements worked fine. Does anyone see the problem?
// main.js
var counter = 0;
var pix = 3;
function addFunction() {
document.getElementById("count").innerHTML = counter += 1;
}
function subtractFunction() {
if (counter > 0) {
document.getElementById("count").innerHTML = counter -= 1;
} else {
alert("Value cannot get negative!")
}
}
function resetFunction() {
document.getElementById("count").innerHTML = counter = 0;
}
function changeFunction() {
pix += 1;
document.getElementById("changebutton").style.padding = pix + "px " + pix + "px " + pix + "px " + pix + "px"
}
function weirdFunction() {
var bgcolor = document.getElementById("weirdbutton");
switch (bgcolor.style.backgroundColor) {
case "white":
bgcolor.style.backgroundColor = "green";
break;
case "green":
bgcolor.style.backgroundColor = "blue";
break;
case "blue":
bgcolor.style.backgroundColor = "red";
break;
case "red":
bgcolor.style.backgroundColor = "white";
break;
}
}.cardblock {
position: center;
text-align: center;
background-color: white;
padding: 0px 0px 15px 15px;
border-radius: 30px;
margin: 10px 100px;
}
.card {
padding: 10px 10px 0px 0px;
border-radius: 30px;
}
#count {
background-color: lightgrey;
padding: 10px;
width: 10%;
margin: 0 auto;
font-size: 150%;
border-radius: 10px;
}
button {
width: auto;
margin: 0 auto;
color: black;
border-radius: 3px;
border-style: groove;
padding: 2px 2px 2px 2px;
}
#addbutton {
background-color: lightgreen;
}
#subbutton {
background-color: pink;
}
#reset-button {
background-color: red;
}
#changebutton {
background-color: lightblue;
color: black;
}
html {
background-color: lightgray;
}<!DOCTYPE html>
<html>
<head>
<title id="title">Hey y'all</title>
<script src="/main.js"></script>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="cardblock">
<div class="card">
<h3>People count:</h3>
</div>
<div class="card">
<h4 id="count">0</h4>
</div>
<div class="card">
<button id="addbutton" onclick="JavaScript:addFunction()">Add</button>
<button id="subbutton" onclick="JavaScript:subtractFunction()">Subtract</button>
</div>
<div class="card">
<button id="reset-button" onclick="JavaScript:resetFunction()">Reset</button>
</div>
</div>
<div class="cardblock" id="playground">
<div class="card">
<h3>Let's attempt to change the HTML elements</h3>
<i>First, write some cr*p</i><br>
<b>Then, make some buttons to change HTML elements or CSS props</b>
</div>
<div class="card">
<button id="changebutton" onclick="JavaScript:changeFunction()">Change</button>
<button id="weirdbutton" onclick="JavaScript:weirdFunction()">Weird</button>
</div>
</div>
</body>
</html>I haven’t formatted/prettified everything yet, sorry for that.
Advertisement
Answer
elem.style.property refers to inline styling of the element. You need to add an inline style, for switch to work.
var counter = 0;
var pix = 3;
function addFunction() {
document.getElementById("count").innerHTML = counter += 1;
}
function subtractFunction() {
if (counter > 0) {
document.getElementById("count").innerHTML = counter -= 1;
} else {
alert("Value cannot get negative!")
}
}
function resetFunction() {
document.getElementById("count").innerHTML = counter = 0;
}
function changeFunction() {
pix += 1;
document.getElementById("changebutton").style.padding = pix + "px " + pix + "px " + pix + "px " + pix + "px"
}
function weirdFunction() {
var bgcolor = document.getElementById("weirdbutton");
switch (bgcolor.style.backgroundColor) {
case "white":
bgcolor.style.backgroundColor = "green";
break;
case "green":
bgcolor.style.backgroundColor = "blue";
break;
case "blue":
bgcolor.style.backgroundColor = "red";
break;
case "red":
bgcolor.style.backgroundColor = "white";
break;
}
}.cardblock {
position: center;
text-align: center;
background-color: white;
padding: 0px 0px 15px 15px;
border-radius: 30px;
margin: 10px 100px;
}
.card {
padding: 10px 10px 0px 0px;
border-radius: 30px;
}
#count {
background-color: lightgrey;
padding: 10px;
width: 10%;
margin: 0 auto;
font-size: 150%;
border-radius: 10px;
}
button {
width: auto;
margin: 0 auto;
color: black;
border-radius: 3px;
border-style: groove;
padding: 2px 2px 2px 2px;
}
#addbutton {
background-color: lightgreen;
}
#subbutton {
background-color: pink;
}
#reset-button {
background-color: red;
}
#changebutton {
background-color: lightblue;
color: black;
}
html {
background-color: lightgray;
}<!DOCTYPE html>
<html>
<head>
<title id="title">Hey y'all</title>
<script src="/main.js"></script>
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="cardblock">
<div class="card">
<h3>People count:</h3>
</div>
<div class="card">
<h4 id="count">0</h4>
</div>
<div class="card">
<button id="addbutton" onclick="addFunction()">Add</button>
<button id="subbutton" onclick="subtractFunction()">Subtract</button>
</div>
<div class="card">
<button id="reset-button" onclick="resetFunction()">Reset</button>
</div>
</div>
<div class="cardblock" id="playground">
<div class="card">
<h3>Let's attempt to change the HTML elements</h3>
<i>First, write some cr*p</i><br>
<b>Then, make some buttons to change HTML elements or CSS props</b>
</div>
<div class="card">
<button id="changebutton" onclick="changeFunction()">Change</button>
<button style="background-color: red" id="weirdbutton" onclick="weirdFunction()">Weird</button>
</div>
</div>
</body>
</html>