Create a new Web page and save it as switch.html.  On this page you will create some event triggers and a function to handle the events:The alert showing food choice

  1. create a function called foodChoice
  2. in that function put an alert which says something
  3. down below in the body add five paragraphs naming five meal choices (chicken, beef, vegetarian, whatever and I'll eat everything)
  4. add an onmouseup event trigger to each one which calls the function (the same trigger for each one for now so copy and paste)
  5. save the page and try it and all five paragraphs should trigger the alert when you click on them
  6. now change the function to allow the receiving of a parameter:
    1. add a variable name chosenFood inside the brackets (remember no quotes when using variables)
    2. change the alert to display the parameter received instead of the text
    3. change the event triggers to send text representing each food choice as a parameter (chicken, beef, vegetarian, whatever, everything)  remembering that you need quotes around text
  7. save and try and the alert should display a different food choice each time

That gives you a page which allows the user to choose a type of food.  Don't move on until it works correctly.  Remember to use your error console to narrow down where any errors are.

The switch

Delete the alert line (or comment it out because you might need it for testing later) and replace it with this:

switch (chosenFood) {
    case 'chicken':
        alert('Poultry preferred');
	break;
    case 'beef':
	alert('Cow chosen');
	break;
    case 'vegetarian':
	alert('Against animal or likes being healthy');
	break;    
    default:
	alert('Glutton');
}

Save and try and you should get a different message depending on the choice.  You could have used multiple if statements but a switch does it all in one.  It looks at the content of the variable and does different things depending on each one  The various choices are known as cases.  The break line marks the end of what to do if the case matches.  The default is what happens if none of the other choices matched.  That is why the last two choices give the same alert.

Improve this if necessary but adding some instructions for the user and by adding a new case which handles the whatever choice.  That means that only people who want all of the meals now get called gluttons.

Note on the steps

In creating this page you were told to do things which were later not used.  The alert and event triggers which were all the same.  The reason is that they allowed you to test the individual parts of the page as you went.  Always do this (at least until you are perfect).  If you test each few lines of code the errors will be easier to find than if you try to test hundreds of lines at the end.