Quick Reach
The Switch statement
The switch statement comes where you have to decide to execute only specific code based at some condition(s). We also learned how to use if statement to execute code, based at some condition however you should use the switch statement when you have a single variable to check for many different possibilities and execute the code accordingly.
See a basic switch case example
For example, your code checks the current date and executes code based at the number of a day of the Month. So, for up to 31 days of the month you have a different block of code to execute for each day. One of the best ways to deal with this kind of scenario is using Javascript switch case. The Switch statement works with javascript case.
In the following section, you will see examples of using switch javascript statement, let us first look at the general syntax.
Syntax of switch case
Following is the general syntax of switch case javascript statement:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
Switch (expression) {
Case 1:
//Statements to be executed
Break;
Case 2:
//Statements to be executed
Break;
Case 3:
//Statements to be executed
Break;
Default:
//Statements to be executed if none of the case is matched
}
|
An expression is given in switch statement which is evaluated once. Then this expression’s value is compared to each case value. If a match is found the code inside the case statement will be executed. If none of the case is matched the default part will be executed. Note that, you can give numbers or even characters in the case statement.
A basic switch case example
Following is a simple JS switch example. The example simply assigns a value to the variable “a”. The variable a is then used as an expression in switch case. Three cases are created with an alert for value 1,2 and 3. If some other value is assigned to the variable a, the default part will be executed.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<html>
<head>
<script type=“text/javascript”>
function nofunc() {
a = 1;
switch(a){
case 1:
alert (“1 is chosen”);
break;
case 2:
alert (“2 is chosen”);
break;
case 3:
alert (“3 is chosen”);
break;
default:
alert (“Some other value!”);
break;
}
}
</script>
</head>
<body>
<button onclick=“nofunc()”>Click here to see JS swtich working</button>
</body>
</html>
|
You can change the value of variable “a” other than 1 to execute other cases or 4,5…etc. for js default case.
A switch example with characters and chosen value
Following is a more generic example of javascript switch case statement. This example uses characters rather numbers. A dropdown of colors is given in the example. Choose a color and after that pressing the button will show an alert telling which color is chosen. It will also change the color of the paragraph’s text.
All this is done in switch case. See the example online with code by clicking the link below.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<html>
<head>
<script type=“text/javascript”>
function colorfunc() {
var colorname = document.getElementById(“selcolor”).value;
switch(colorname){
case ‘Black’:
alert (“Black is chosen”);
document.getElementById(“p1”).style.color = “black”;
break;
case ‘Yellow’:
alert (“Yellow is chosen”);
document.getElementById(“p1”).style.color = “Yellow”;
break;
case ‘Red’:
alert (“Red is chosen”);
document.getElementById(“p1”).style.color = “Red”;
break;
default :
alert (“Green is chosen”);
document.getElementById(“p1”).style.color = “green”;
break;
}
}
</script>
</head>
<body>
<p id=“p1”>Select a color and press button to change text color</p>
<select id=“selcolor”>
<option>Black</option>
<option>Yellow</option>
<option>Red</option>
<option>Green</option>
</select>
<button onclick=“colorfunc()”>Click to change color</button>
</body>
</html>
|
Javascript break statement
As shown in above syntax and examples we used break statement inside switch case. The break javascript statement will exit the switch statement as soon as it is executed.
The break statement is used inside the case statement. If you do not use break statement the code will keep on executing to match following cases after the first case is matched. See what happens to above example without break statement.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<html>
<head>
<script type=“text/javascript”>
function colorfunc() {
var colorname = document.getElementById(“selcolor”).value;
switch(colorname){
case ‘Black’:
alert (“Black is chosen”);
document.getElementById(“p1”).style.color = “black”;
case ‘Yellow’:
alert (“Yellow is chosen”);
document.getElementById(“p1”).style.color = “Yellow”;
case ‘Red’:
alert (“Red is chosen”);
document.getElementById(“p1”).style.color = “Red”;
default :
alert (“Green is chosen”);
document.getElementById(“p1”).style.color = “green”;
}
}
</script>
</head>
<body>
<p id=“p1”>Select a color and press button to change text color</p>
<select id=“selcolor”>
<option>Black</option>
<option>Yellow</option>
<option>Red</option>
<option>Green</option>
</select>
<button onclick=“colorfunc()”>Click to change color</button>
</body>
</html>
|
Javascript Default
The default section inside javascript switch statement executes if none of the cases is matched. It is like the else statement in JS if..else.
Also see Javascript if
Leave A Comment?