Javascript switch statement not working - is three too many?

Question

I'm new to Javascript and am trying to learn by making a little program where you enter your astrological sign, planet, and house to make a little madlibs kind of story. To do this, I put three switch statements in one function.

Not sure if that's too many switch statements but, when I load it on Chrome, sometimes I only get text, sometimes I get text and text2, and sometimes I only get text3.

Does anyone know why this is happening? Do I simply have too many switch statements in one function? I searched online but could not find out how many are allowed in one function.

function tellMeaStory() {
  var text;
  var text2;
  var text3;
  var sign = document.getElementById("mySign").value;
  var planet = document.getElementById("myPlanet").value;
  var house = document.getElementById("myHouse").value;

  switch(sign) {
    case "Aries", "aries":
      text = "red";
      break;
    case "Taurus", "taurus":
      text = "calm";
      break;
    case "Gemini", "gemini":
      text = "quirky";
      break;
    case "Cancer", "cancer":
      text = "moody";
      break;
    case "Leo", "leo":
      text = "hungry";
      break;
    default:
      text = "sign";
  }

  switch(planet) {
    case "Sun", "sun":
      text2 = "hero";
      break;
    case "Moon", "moon":
      text2 = "mother";
      break;
    case "Mercury", "mercury":
      text2 = "twin";
      break;
    case "Venus", "venus":
      text2 = "courtesan";
      break;
    case "Mars", "mars":
      text2 = "soldier";
      break;
    default:
      text2 = "planet";
  }

  switch(house) {
    case "one", "One":
      text3 = "hole";
      break;
    case "two", "Two":
      text3 = "buffet";
      break;
    case "three", "Three":
      text3 = "database";
      break;
    case "four", "Four":
      text3 = "stomach";
      break;
    case "five", "Five":
      text3 = "wilderness";
      break;
    default:
      text3 = "house";
  }
  document.getElementById("demo").innerHTML += "You are a " + text + " " + text2 + " in a " + text3;
}

<input id="mySign" type="text" value="Enter your sign">
<input id="myPlanet" type="text" value="Enter your planet">
<input id="myHouse" type="text" value="Enter your house">

<button onclick="tellMeaStory()">Generate</button>
<div id="demo"></div>

Why not just convert the case before giving it to the switch? — Dave Newton, Jul 17 '18 at 01:59
You have `default` cases, so there's no reason for the `switch` statements to return nothing. — Obsidian Age, Jul 17 '18 at 02:01
Hi Dave! I haven't learned how to do that yet. Would you mind giving me a little example? — Alice Sparkly Kat, Jul 17 '18 at 02:01
@ObsidianAge Thanks! I got rid of them. However, the third one, with the houses, still come up as undefined. Any idea why? — Alice Sparkly Kat, Jul 17 '18 at 02:03

score 1 · Accepted Answer · answered Jul 17 '18 at 02:11

The reason you're seeing weird results is because of how JavaScript handles the comma. For example case "Sun", "sun": Doesn't check if the case is sun or Sun, it creates a string "sun" the compares against "Sun". There are no limits on switch statements, however they are not great for "most" cases. If you want to rewrite this to check for multiple spellings you can do one of two ways, at least that I can think of.

Reverse your switch statement

  switch(true) {
case (planet.toUpperCase() === "SUN"):
  text2 = "hero";
  break;
case (planet.toUpperCase() === "MOON"):
  text2 = "mother";
  break;
case (planet.toUpperCase() === "MERCURY"):
  text2 = "twin";
  break;
case (planet.toUpperCase() === "Venus"):
  text2 = "courtesan";
  break;
case (planet.toUpperCase() === "MARS"):
  text2 = "soldier";
  break;
default:
  text2 = "planet";
}

or You could use a chain of if statements, skipping the switch all together.

if(planet === "sun" || planet === "Sun" || planet === "SUn") {
  // text assignment
}

or

if (planet.toLowerCase() === "sun") { 
  // text assignment 
}

You can read more about the comma operator here.

Javascript switch statement not working - is three too many?

1 Answers1