If statement versus switch statement in javascript

Question

I have an interesting case for everyone who thinks they know javascript and its switch and if statement so well. This is how it should normally work:

var a = 1;
if (a == 1) alert("true");

This is extremely simplified. With the switch statement, it goes like this:

var a = 1;
switch (a)
{
  case 1: alert("true");
}

However, when I attempt to do the switch statement, correctly as far as I can tell, to replace a lot of if statements, I suddenly can't seem to make it work. Offcourse, this question has been asked a lot of times, yet all codes are different and there is no consistent pattern for that, so I couldn't find it myself online.

The code below is supposed to output that the hero is NOT confirmed to have correct values:

<script type="text/javascript">
  Skilllevel = [0,20,80,150,300,800,1000,1200,1400,1600,2000,2250,2500,2750,3000,4000,4200,4400,4700,5000];
  Merclevel = [0,150];
  A = 0;
  B = "";
  hero = "";
  heroesMain = [0,0,0,0,0,0,0,0,0,0,16,0,0,0,16,0,18,16,16,16,0,0,0,0,0,0,0];
  heroesCost = [0,0,0,0,0,0,1,0,2,1,1,0,0,1.5,1,1,2,1,1,1.5,0,0,0,0,0,0,0];
  function skillcalc()
  {
    var confirmed = "";
    var skillQ = document.getElementById("SkillQ").value;
    var skillA = document.getElementById("SkillA").value;
    if (skillQ == "max") skillQ = 20;
    else if (skillQ == "min") skillQ = 1;
    else if (skillQ < 0) skillQ = 0;
    if (skillA > 20) skillA = 20;
    else if (skillA == "tomin")
    {
      waarde = document.getElementById("heroes").value;
      hero = document.getElementById("heroes");
      /*if (waarde == 1 || waarde == 2 || waarde == 3 || waarde == 4 || waarde == 5 || waarde == 6 || waarde == 7 || waarde == 8 || waarde == 9 || waarde == 10 || waarde == 11 || waarde == 12 || waarde == 13 || waarde == 14 || waarde == 15 || waarde == 16 || waarde == 17 || waarde == 18 || waarde == 19 || waarde == 20 || waarde == 22 || waarde == 22 || waarde == 23 || waarde == 24 || waarde == 25 || waarde == 26) confirmed = "NOT ";*/
//switch statement not working
switch (waarde)
{
case 1: confirmed = "NOT ";
}
      hero = hero.options[hero.selectedIndex].text;
      skillA = heroesMain[waarde];
      if (heroesMain[waarde] == 0 || heroesCost[waarde] == 0) B+="I don\'t know some of it, but here it comes:<br />";
     // if (waarde == 1 || waarde == 2) confirmed = "NOT ";
      B += "The " + hero + " costs " + heroesCost[waarde] + " rage at level " + heroesMain[waarde] + ". <br />WARNING! Everything is still being tested. <br /> This hero is " + confirmed + "confirmed to have correct values.";
    }
    else if (skillA < 0) skillA = 0;
    while (skillA > skillQ)
    {
      A+=Skilllevel[skillQ];
      skillQ++;
    }
    WriteNew = document.getElementById("writeNew");
    if (WriteNew.checked)
    {
      document.getElementById("Answer").innerHTML+= "The # of rings required = " + A  + "<br />"+ B;
    }
    else
    {
      document.getElementById("Answer").innerHTML= "The # of rings required = " + A  + "<br />"+ B;
    }
    A=0;
    B="";
  }
</script>
Your hero: 
<select id="heroes">
<option value="0" selected="selected">[Any epic hero]</option>
<option value="1">Air Elite</option>
<option value="2">Glory Priestress</option>
<option value="3">Blockhead</option>
<option value="4">Carol d'Belle</option>
<option value="5">Blitz Bomber</option>
<option value="6">Pounder</option>
<option value="7">Hydrasaur</option>
<option value="8">Renee Ven</option>
<option value="9">Arctic Lord</option>
<option value="10">Pan Goli</option>
<option value="11">Sapphirix</option>
<option value="12">Dark Rider</option>
<option value="13">Great Sage</option>
<option value="14">Abyss Demon</option>
<option value="15">Landslide</option>
<option value="16">Ambrosia</option>
<option value="17">Skull Mage</option>
<option value="18">Chiron</option>
<option value="19">Djinni</option>
<option value="20">Demon Slayer</option>
<option value="21">Enchantress</option>
<option value="22">The Berserker</option>
<option value="23">Savage Chief</option>
<option value="24">Won Ton</option>
<option value="25">Arcane Caster</option>
<option value="26">Toxic Shaman</option>
</select>
<br />
Your skilllevel: <input type="text" id="SkillQ"><br />
Required skilllevel: <input type="text" id="SkillA"><br />
<label for="writeNew">Write New?</label><input type="checkbox" id="writeNew" /><br />
<button onclick="skillcalc()">Calculate</button>

<p id="Answer"></p>

I requested the browser to alert back the value of waarde, the value of which this is about.

Here's a screenshot of how it should look: https://i.sstatic.net/AfF5s.png

Here's how it actually looks like: (it doesn't say that its values are NOT correct) https://i.sstatic.net/8lYAd.png

I am willing to respond to as many questions as you may have to this interesting scene. Maybe I am overlooking something, but I am not quite sure what it is.

Regards, Patrick

Washington Guedes · Accepted Answer · 2016-05-02 21:50:53Z

3

It is because the value you used in the switch-statement is text.

Try it in the console:

var a = '1'; 
switch(a) {
    case 1: alert('Number'); 
    case '1': alert('Text');
}

You should probably use switch(parseInt(a)).

answered May 2, 2016 at 21:50

Washington Guedes

4,3753 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Over a year ago

Or better yet, parseInt(a, 10). Don't forget your radix.

Washington Guedes Over a year ago

@dave. Or switch(+a) using unary operator

Patrickkasie Over a year ago

Your answer solved the cause and User6188402, Dave and Rogier Spieker finetuned the bits that are going to make the code just a little more future proof and a little less unreadable. Thanks all

Rogier Spieker · Accepted Answer · 2016-05-02 22:21:03Z

What is happening is that you've grown accustomed to javascript comparing what you intend, not what you say.

This phenomenon is called type coercion and it happens when you use the == (2x =) operator instead of === (3x =).

When you use ==, for example in '1' == 1, one of the values is converted into the type of the other (this is called coercion), so - in this example - the actual comparison is '1' == '1', which results in true.

If you use === to compare, the value must be equal in both value and type, so '1' === 1 will result in false.

The switch doesn't do this coercion, so it will behave as if you are comparing using === (where both value and type must be equal).

In order for the switch to work correctly, you must ensure the value fed to switch(value) has the same type as the values you use in the case.

Your code takes a value from the DOM (a form), using

waarde = document.getElementById("heroes").value

Which will always be a string type, so you either must use strings in you case (e.g. case '1':) or convert the value obtained from the DOM into a number, (e.g. waarde = parseInt(..., 10) (the radix argument is important!))

Collectives™ on Stack Overflow

If statement versus switch statement in javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related