JavaScript – Exercise 07: Switch – Case Statements

In the previous post, you learned that the conditional statements can change the direction or flow of the program. One type of conditional statement use if-else structure. Another type of conditional statement is called the switch-case statement.

A user input the choice from a given set of options and switch receives the input. The switch matches the input value to a number of cases and when a case matches, it executes the commands in that case.

For example

Switch(choice)
{

      case 1:
                   do something.....;
                   break;
      case 2:
                   do something.....;
                   break;
         .
         .
         .
      default:
                   do something.....;

}

 

The switch-case is preferred over if-else whenever you like to give a lot of choices to your users.

In this article, you will write a JavaScript using switch-case statements. Create a new HTML page called ex07.html and link the JavaScript file to the HTML page, then verify the output of the program in a browser.

JavaScript File with Switch-Case Statements

To create a new JavaScript file with switch-case statements follow the steps below.

Step 1: Open Notepad and create a new file called switch.txt and save it.

Switch.txt
Switch.txt

Step 2: Insert the following JavaScript to the text file – switch.txt and save it as switch.js.

 

function s1() {

var fruits = document.getElementById("myInput").value;

switch(fruits) {
case "1":
document.write("<h1>" + "This is first choice!" + "</h1>");
break;
case "2":
document.write("<h1>" + "This is second choice!" + "</h1>");
break;
case "3":
document.write("<h1>" + "This is third choice!" + "</h1>");
break;
default:
document.write("<h1>" + "Wrong choice! Try again" + "</h1>");

}

}

 

Note that if you should check your code before saving it, any typos can break the JavaScript file. Also, you must save your JavaScript file inside the Exercise-07 folder.

HTML Page

Now that you have created JavaScript file, it’s time to create an HTML page and link the JavaScript file to the HTML page. Follow the steps below to create the HTML page and save it under Exercise-07 folder.

Step 1: Open Notepad document and save it as ex07.txt inside the Exercise-07 folder.

Ex07.txt
Ex07.txt

Step 2: Open the notepad and insert the following HTML code.

 

<html>
<head>
<title>

Basic JavaScript - Exercise 07 - Switch Case

</title>

</script>

</head>

<body>

<p> This is example of Switch-Case statements.</p>

</body>

</html>

 

Step 4: Add the following script between the head section to link the JavaScript file to the HTML page.

Advertisements


 

<script type= 'text/javascript' src= 'switch.j'> <script/>

 

Your final HTML page should look like following.

 

<html>
<head>
<title>

Basic JavaScript - Exercise 07 - Switch Case

</title>

<script type=text/JavaScript” src=”switch.js”>

</script>

</head>

<body>

<p> This is example of Switch-Case statements.</p>

</body>

</html>

 

Step 5: Save the file- ex07.txt as ex07.html and close it.

Output of the HTML Page

When you open the ex07.html in a browser, you will get an input textbox and a submit button.

Enter 1, 2, or 3 as a choice and the result will be displayed on the screen.

Input textbox for Switch-Case Statement
Input textbox for Switch-Case Statement

 

Output - Switch-Case Statements
Output – Switch-Case Statements
Advertisements