JavaScript switch case statement explained with different HTML elements

The JS switch case statement

The switch case is a decision-making statement in JavaScript which is used to execute a specific block of code against an expression.

Structure of switch case JavaScript statement

This is how you can use the switch case statement in JavaScript:

See the following figure for understanding the flow of switch JS statement:

JavaScript switch case

Following are a few examples to explain how you can use the switch JavaScript statement simply and with different HTML elements.

A simple example with numbers to explain switch case

In this example, I simply used a switch statement with three cases along with a default case. A numeric variable is assigned a value which is used in the switch expression. After that, three cases are created that will be checked for variable’s value. A default case is also created that executes only if none of the case evaluates as true.

See the demo and code online:

JavaScript switch numeric

See online demo and code

The following JS code is used in the <script> section of <head> tag:

 

This code is written inside the switchfunction JS function that is called at the click event of the button. You can see the complete code and output in the demo page.

A demo of switch case with user selected value

In this demo, I am using almost the same code as above, except the value is selected by the user for the variable. For that, a dropdown with five values is created. After selecting the option from the dropdown, as you click the button, the switch statement will execute.

Different JavaScript cases will be evaluated and the one that evaluates as true will display the alert. For the sake of understanding, try 4 and 5 values as well, in which case the default case will execute. See the demo online:

JavaScript switch user selected

See online demo and code

In the code, see this line:

 

This is used to get the selected value from the dropdown. As such, dropdown value returns as a string, it is converted into an integer by parseInt function before using in the switch case statement.

As there are no cases for value 4 and 5, so default case executed.

A demo of JavaScript switch with string values

In this case, an HTML dropdown is given to select the theme color of the web page. As you select the color and press “Execute switch statement” button, the switch case statement will execute and apply the background color to the body of demo page.

Have a look at the demo online:

JavaScript switch case string

See online demo and code

The following code is used to get the selected value and evaluate different cases in above example:

 

An example with current month in Switch case

In this example, I will get the current month by using the date object. The current month value (0-11) will be assigned to a variable that will be used as an expression in the switch statement.

After that, twelve case JavaScript statements are used; one for each month. The corresponding current month message will be displayed in a div. See the example online:

JavaScript switch case month

See online demo and code

No function is used this time; instead, the script is executed as the web page is loaded. The reason was to check the month and display a message accordingly.

You may use this for displaying some important events, quotes or other messages related to that month.

Also, note that I placed <script> section just before the </body> tag this time. Because, if I had placed this code in <head> tag, then text in the div would not have displayed, since div is created in the <body> tag while <head> code executes prior to <body> code.

JavaScript switch statement with HTML table

In this demo, I have created an HTML table with CSS classes for <th> and <td>. A dropdown is given to select the theme for the table.

As you select a table theme and press the button, a JS function will execute that runs the switch statement. In switch JavaScript statement, the theme value is checked in multiple cases and the one that turns out as true, it will execute the following statement:

document.getElementById(“switchtable”).className

So the table looks or class of CSS will be changed inside the switch case statement by using the JS code.

Check this demo by yourself:

JavaScript switch case table

See online demo and code

You see, three CSS classes are created for HTML table in the <style> section of <head> tag. Initially, first CSS class is applied as the demo page loaded. As you select “Theme 2” or “Theme 3” from the dropdown and press the “Apply Theme” button, the value of dropdown is sent to JS variable.

This variable is used in the switch statement, which is basically the CSS class name. Then I used the JS statement to apply that selected theme to the HTML table inside the JavaScript Case:

 

The break statement in switch case

Have you noticed, I used the break statement in each case of the switch statement? The break statement is used to exit the control out of the switch statement to the next line of code.

If you do not use the break statement, the next cases will keep on evaluating and executing the code inside it. To understand it better, remove the break statement in any demo and execute the code. Then see the output.

The JavaScript default case

Except the Month example, I used the default case in each demo. The default case is just like the else statement in the if..else statement of JavaScript.

The default case executes if none of the cases are true in the switch statement.