Skip to content
Advertisement

JavaScript throws Uncaught Syntax Error: unexpected token (case from switch statement)

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.

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