How to convert if to switch statement in JavaScript? (beginner JavaScript)

c0d0ps · June 27, 2022

Hi I'm using a .html and .js file

Languages: HTML, CSS, JavaScript
Level: Beginner

Problem:

I'm guessing switch statements don't work with if else statements?

Updated to bring more clarity

To underline the point of the exercise here:

the goal is to convert if else statements to a switch version of the statement (like noted in my under "JavaScript" headline).

Not necessarily using an if else statement (which I tried to do) in a switch statement.

~~JavaScript~~

See updated code further down

Spoiler

let response;
let score = 75;
let machineActive = false;
function setScore() {
  let choice = select.value;

  switch (machineActive) {
  case choice1:
    if (score <= 0 || score >= 100) {
      response = "This is not possible, an error has occurred.";}

  case choice2:
      if (score >= 0 && score <= 19) {
      response = "That was a terrible score — total fail!";}

  case choice3:
    if (score >= 20 && score < 39) {
      response = "You did a passable job, not bad!";}

  case choice4:

    if (score >= 40 && score < 69) {
      response = "You did a passable job, not bad!";}

  case choice5:
    if (score >= 70 && score < 89) {
      response = "That's a great score, you really know your stuff.";}

  case choice6:
    if (score >= 90 && score < 100) {
      response = "What an amazing score! Did you cheat? Are you for real?";}

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

if-else Code from last exercise that i'm converting to a switch statement

Spoiler

        let response;
        let score = 75;
        let machineActive = false;

        if (machineActive === false) {
            response = "Switch the machine on.";}

        if (score <= 0 || score >= 100) {
            response = "This is not possible, an error has occurred.";}

        if (score >= 0 && score <= 19) {
            response = "That was a terrible score — total fail!";}

        if (score >= 20 && score < 39) {
            response = "You did a passable job, not bad!";}

        if (score >= 40 && score < 69) {
            response = "You did a passable job, not bad!";}

        if (score >= 70 && score < 89) {
            response = "That's a great score, you really know your stuff.";}

        if (score >= 90 && score < 100) {
            response = "What an amazing score! Did you cheat? Are you for real?";}

        // Add your code here

        // Don't edit the code below here!

        section.innerHTML = ' ';
        let para1 = document.createElement('p');
        let para2 = document.createElement('p');

        para1.textContent = `Your score is ${score}`;
        para2.textContent = response;

        section.appendChild(para1);
        section.appendChild(para2);

Updated code:

Spoiler

let response;
let score = 75;
let machineActive = false;

  switch (machineActive) {
  case score <= 0 || score >= 100:
      console.log("This is not possible, an error has occurred.");
  break;

  case score >= 0 && score <= 19: 
      console.log('That was a terrible score — total fail!');
  break;

  case score >= 20 && score < 39:
      console.log('You did a passable job, not bad!');
  break;

  case score >= 40 && score < 69:
      console.log('You did a passable job, not bad!');
  break;

  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
  break;

  case score >= 90 && score < 100:
      console.log('What an amazing score! Did you cheat? Are you for real?');
  break;

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

tikker · June 27, 2022

Why a switch statement here? This seems perfectly handled with just if statements, since I don't see the logic in first choosing the score category to compare in.

Otherwise, something like this may work: https://stackoverflow.com/questions/5464362/javascript-using-a-condition-in-switch-case

c0d0ps · June 27, 2022

6 minutes ago, tikker said:

Why a switch statement here? This seems perfectly handled with just if statements, since I don't see the logic in first choosing the score category to compare in.

Otherwise, something like this may work: https://stackoverflow.com/questions/5464362/javascript-using-a-condition-in-switch-case

Test your skills: Conditionals - Learn web development | MDN (mozilla.org)

I am doing the mozilla online course - javascript exercise

AbydosOne · June 27, 2022

18 minutes ago, c0d0ps said:

Problem:

I'm guessing switch statements don't work with if else statements?

You're using switch statements wrong.

First, your cases need to be values, not just words. The switch statement takes the value in the parenthesis and jumps to the case matching that value (or default if there isn't one).

var temp = 2;

switch(temp) {
    case 1: return "one";
    case 2: return "two";
    case 3: return "three";
    default: return "I give up."
}

// this would return the value "two".

Second, using a switch with a boolean is pointless (and probably not within specification); just use if-else if that's the case.

var temp = false;

switch(temp) {
    case true: return "true";
    case false: return "false";
    default: return "wat?" // can't ever get here
}

// is exactly the same as

if (temp) {
    return "true";
} else {
    return "false";
}

Eigenvektor · June 27, 2022

Switch only really makes sense if you have a finite list of concrete values to compare against (e.g. something like an enum). Your current if-statement includes things like

if (score <= 0 || score >= 100) {

which is not a finite list⁽¹⁾. Meaning you'd have to write something like:

switch (score) {
   case (smallest possible negative number):
   …
   case -3:
   case -2:
   case -1:
   case 0:
   case 100:
   case 101:
   case 102:
   case 103:
   …
   case (largest possible positive number):
       // logic you want to execute in this case
}

1) Technically the list is finite, because e.g. 32/64/… bit integers only have so many values… but that's still a ton of values you don't want to include in a switch statement.

Alvin853 · June 27, 2022

What is the original assigment? I think there is some confusion, are you supposed to write code that "switches the machine on" or write code using a switch statement?

c0d0ps · June 27, 2022

4 minutes ago, Alvin853 said:

What is the original assigment? I think there is some confusion, are you supposed to write code that "switches the machine on" or write code using a switch statement?

Conditionals 3

Spoiler

In this task you need to take the code you wrote for the second task, and rewrite the inner if...else if...else to use a switch statement instead.

Try updating the live code below to recreate the finished example:

Conditionals 2

Update:
TLDR

the goal is to convert if else statements to a switch version of the statement (like noted in my under "JavaScript" headline).

Not necessarily using an if else statement (which I tried to do) in a switch statement.

I will work on better placing though thank you.

tikker · June 27, 2022

16 minutes ago, c0d0ps said:

Test your skills: Conditionals - Learn web development | MDN (mozilla.org)

I am doing the mozilla online course - javascript exercise

Hmm, nothing else besides the stackoverflow answer comes to mind then. It seems like a little bit of an odd example for switch statements to me.

Alvin853 · June 27, 2022

3 minutes ago, c0d0ps said:

Conditionals 3

Hide contents

In this task you need to take the code you wrote for the second task, and rewrite the inner if...else if...else to use a switch statement instead.

Try updating the live code below to recreate the finished example:

Conditionals 2

Hide contents

For this task you are given three variables:

machineActive — contains an indicator of whether the answer machine is switched on or not (true/false)

score — Contains your score in an imaginary game. This score is fed into the answer machine, which provides a response to indicate how well you did.

response — begins uninitialized, but is later used to store a response that will be printed to the output panel.

You need to create an if...else structure that checks whether the machine is switched on and puts a message into the response variable if it isn't, telling the user to switch the machine on.

Inside the first, you need to nest an if...else if...else that puts appropriate messages into the response variable depending on what the value of score is — if the machine is turned on. The different conditional tests (and resulting responses) are as follows:

Score of less than 0 or more than 100 — "This is not possible, an error has occurred."

Score of 0 to 19 — "That was a terrible score — total fail!"

Score of 20 to 39 — "You know some things, but it\'s a pretty bad score. Needs improvement."

Score of 40 to 69 — "You did a passable job, not bad!"

Score of 70 to 89 — "That\'s a great score, you really know your stuff."

Score of 90 to 100 — "What an amazing score! Did you cheat? Are you for real?"

Try updating the live code below to recreate the finished example. After you've entered your code, try changing machineActive to true, to see if it works.

Yeah that's a very bad example for switch statements, the only way I could see this working is by extracting the first digit, but I'm pretty sure this is not the intended solution:

switch(Math.floor(score/10)) {
  case 0:
  case 1:  
    response = "That was a terrible score --- total fail!";
    break;
  case 2:
  case 3:
    response = "You know some things, but it\'s a pretty bad score. Needs improvement.";
    break;
  .
  .
  .
  default: 
    response = "This is not possible, an error has occured."
}

c0d0ps · June 27, 2022

12 minutes ago, Alvin853 said:
Yeah that's a very bad example for switch statements, the only way I could see this working is by extracting the first digit, but I'm pretty sure this is not the intended solution:
SNIP

So this is what I came up with thanks to the stack overflow linked above.

Spoiler

let response;
let score = 75;
let machineActive = false;

  switch (true) {
  case score <= 0 || score >= 100:
      response = "This is not possible, an error has occurred.";

  case score >= 0 && score <= 19: 
      response = "That was a terrible score — total fail!";

  case score >= 20 && score < 39:
      response = "You did a passable job, not bad!";

  case score >= 40 && score < 69:
      response = "You did a passable job, not bad!";

  case score >= 70 && score < 89:
      response = "That's a great score, you really know your stuff.";

  case score >= 90 && score < 100:
      response = "What an amazing score! Did you cheat? Are you for real?";

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

Unfortunately it says "machine is not on" even when change let machineActive = false; to true

mikat · June 27, 2022

12 minutes ago, c0d0ps said:

So this is what I came up with thanks to the stack overflow linked above.

Hide contents

let response;
let score = 75;
let machineActive = false;

  switch (true) {
  case score <= 0 || score >= 100:
      response = "This is not possible, an error has occurred.";

  case score >= 0 && score <= 19: 
      response = "That was a terrible score — total fail!";

  case score >= 20 && score < 39:
      response = "You did a passable job, not bad!";

  case score >= 40 && score < 69:
      response = "You did a passable job, not bad!";

  case score >= 70 && score < 89:
      response = "That's a great score, you really know your stuff.";

  case score >= 90 && score < 100:
      response = "What an amazing score! Did you cheat? Are you for real?";

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

Unfortunately it says "machine is not on" even when change let machineActive = false; to true

You'll need to add "break" statements after each of your response assignments, as it is doing what you want it to do but then also executing the default statement, setting your response to the default one. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch#what_happens_if_i_forgot_a_break

c0d0ps · June 27, 2022

10 minutes ago, mikat said:

You'll need to add "break" statements after each of your response assignments, as it is doing what you want it to do but then also executing the default statement, setting your response to the default one. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch#what_happens_if_i_forgot_a_break

Thank you

This is the code after fixing the no break problems and exchanging response to console.log();

Only problem is nothing shows up besides "Your score is 75."

Spoiler

let response;
let score = 75;
let machineActive = false;

  switch (machineActive) {
  case score <= 0 || score >= 100:
      console.log("This is not possible, an error has occurred.");
  break;

  case score >= 0 && score <= 19: 
      console.log('That was a terrible score — total fail!');
  break;

  case score >= 20 && score < 39:
      console.log('You did a passable job, not bad!');
  break;

  case score >= 40 && score < 69:
      console.log('You did a passable job, not bad!');
  break;

  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
  break;

  case score >= 90 && score < 100:
      console.log('What an amazing score! Did you cheat? Are you for real?');
  break;

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

mikat · June 27, 2022

15 minutes ago, c0d0ps said:

Thank you

This is the code after fixing the no break problems and exchanging response to console.log();

Only problem is nothing shows up besides "Your score is 75."

Hide contents

let response;
let score = 75;
let machineActive = false;

  switch (machineActive) {
  case score <= 0 || score >= 100:
      console.log("This is not possible, an error has occurred.");
  break;

  case score >= 0 && score <= 19: 
      console.log('That was a terrible score — total fail!');
  break;

  case score >= 20 && score < 39:
      console.log('You did a passable job, not bad!');
  break;

  case score >= 40 && score < 69:
      console.log('You did a passable job, not bad!');
  break;

  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
  break;

  case score >= 90 && score < 100:
      console.log('What an amazing score! Did you cheat? Are you for real?');
  break;

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

The formatting is off (not a problem atm but it's better to start right), you replaced the response assignments with console.log and the machine is off, your console.log's were not ending up in the paragraph but in the console, and because the machine was off only the first "an error has occured" message was being logged to the console.

let response;
let score = 75;
let machineActive = true;

switch (machineActive) {
  case score <= 0 || score >= 100:
    response = 'This is not possible, an error has occurred.';
    break;

  case score >= 0 && score <= 19: 
    response = 'That was a terrible score — total fail!';
    break;

  case score >= 20 && score < 39:
    response = 'You did a passable job, not bad!';
    break;

  case score >= 40 && score < 69:
    response = 'You did a passable job, not bad!';
    break;

  case score >= 70 && score < 89:
    response = "That's a great score, you really know your stuff.";
    break;

  case score >= 90 && score < 100:
    response = 'What an amazing score! Did you cheat? Are you for real?';
    break;

  // include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';
}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

c0d0ps · June 28, 2022

20 hours ago, mikat said:

The formatting is off (not a problem atm but it's better to start right), you replaced the response assignments with console.log and the machine is off, your console.log's were not ending up in the paragraph but in the console, and because the machine was off only the first "an error has occurred*" message was being logged to the console.

SNIP

Hi thanks for answer,

as noted in my (second) previous comment even on machineActive=true it shows Your Score is 75 and not the console log for

  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
  break;

screenshot

Spoiler

RockSolid1106 · June 28, 2022

2 hours ago, c0d0ps said:
Hi thanks for answer,

as noted in my (second) previous comment even on machineActive=true it shows Your Score is 75 and not the console log for
  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
  break;
screenshot

Hide contents

-snip-

Console log will log the text to the *console*. What you want to do is set the value of the paragraph element, for which variables have already been defined near the end of the code. All you need to do is set the value of the variable "response" to the text.

console.log("That's a great score, you really know your stuff.";);
// to
response = "That's a great score, you really know your stuff.";

2 hours ago, c0d0ps said:

  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
  break;

break should also have the same indentation as the rest of the block in the case.

Corrected:

2 hours ago, c0d0ps said:

  case score >= 70 && score < 89:
      console.log("That's a great score, you really know your stuff.");
      break;

After all the changes, your code should look like this:

let response;
let score = 75;
let machineActive = true;

  switch (machineActive) {
  case score <= 0 || score >= 100:
      response = "This is not possible, an error has occurred.";
      break;

  case score >= 0 && score <= 19: 
      response = 'That was a terrible score — total fail!';
      break;

  case score >= 20 && score < 39:
      response = 'You did a passable job, not bad!';
      break;

  case score >= 40 && score < 69:
      response = 'You did a passable job, not bad!';
      break;

  case score >= 70 && score < 89:
     response = "That's a great score, you really know your stuff.";
      break;

  case score >= 90 && score < 100:
      response = 'What an amazing score! Did you cheat? Are you for real?';
      break;

// include as many cases as you like

  default:
    response = 'The machine is turned off. Turn it on to process your score.';}

// Don't edit the code below here!

section.innerHTML = ' ';
let para1 = document.createElement('p');
let para2 = document.createElement('p');

para1.textContent = `Your score is ${ score }.`;
para2.textContent = response;

section.appendChild(para1);
section.appendChild(para2);

Spoiler

AbydosOne · June 28, 2022

I'm pretty sure that this is a (horrific, IMO) abuse of a switch statement. I'm not 100% sure, but I think this is how this is evaluating:

var temp = true;
var num = 2;

switch(temp) {
    case num == 1: return "one";
    case num == 2: return "two";
    case num == 3: return "three";
    default: return "wat?";
}

becomes

switch(true) {
    case false: return "one";
    case true: return "two"; // returns "two"
    case false: return "three";
    default: return "wat?";
}

which means if you're not careful about your logic, setting temp to false will return the first "wrong" answer in the switch, not the default value.

I feel like two layers of nested ifs would be easier to read and debug:

var temp = false;
var num = 2;

if (temp) {
    if (num == 1) { return "one"; }
    else if (num == 2) { return "two"; } // returns "two", easier to follow how we got here conditionally.
    else if (num == 3) { return "three"; }
    else { return "wat?"; }
}

c0d0ps · June 29, 2022

21 hours ago, RockSolid1106 said:

Console log will log the text to the *console*. What you want to do is set the value of the paragraph element, for which variables have already been defined near the end of the code. All you need to do is set the value of the variable "response" to the text.

break should also have the same indentation as the rest of the block in the case.

Corrected:

After all the changes, your code should look like this:

Thank you that worked great, except for machineActive = false

I get this error code, = true still works like it should though and I don't know why

Spoiler

Summarizing:
For this specific exercise it is better to define response because of the pre stated paragraph.

c0d0ps · June 29, 2022

21 hours ago, AbydosOne said:

I'm pretty sure that this is a (horrific, IMO) abuse of a switch statement. I'm not 100% sure, but I think this is how this is evaluating:

becomes

which means if you're not careful about your logic, setting temp to false will return the first "wrong" answer in the switch, not the default value.

I feel like two layers of nested ifs would be easier to read and debug:

The exercise was to use a switch statement not if else statements but yes I am more comfortable with if else statements from my high school days.

I am still new to the whole switch thing.

This exercise is part of the mozilla course of javascript called conditionals 3

I think you missed the part where I added break; but yes it was needed.

The code wasn't read properly by the computer without it.

I will try to remember that.

I appreciate pedantics as much as anyone (even if I don't know much about programming) but I think you're exaggerating about the whole abusing.

Coding in bliss is not abuse it is me taking the stairs and falling down and hurting my ankles.

Not worse than that.

Sign In

How to convert if to switch statement in JavaScript? (beginner JavaScript)

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

The North Korean Gaming Console