Question

The situation I have is a drop down list and an image on a html page. I’m using javascript script. I’m using a switch statement. I’ve constructed my switch and case statements. So far I got an alert box for each case that displays a unique message in the browser when I make a selection in the drop down list. But I want the image on the page to change with each message. I tried using multiple variables in the switch parameter but that disables the alert boxes. Is there a way for me to use a single switch variable that can call the message boxes and the images? Or is there a way to use multiple variables in the switch parameter? I’ve been researching the internet, even this forum for answers, but haven’t found anything that matches my problem. I found some answers using if statements and AJax but that is outside of the scope of my homework and what we’ve learned so far. So basically my task is to use a switch construct to evaluate the selection and when a match is found, display the appropriate image and the alert box. Any suggestions.

Answer 1

You can change the source of the image for each case. Switch statements only accept one parameter.

HTML

<img src="image_path" id="myImage" />

JavaScript

var img = document.getElementById( "myImage" );
switch( value ) {
    case 0:
        alert( "message" );
        img.src = "new_path";
        break;
    case 1:
        alert( "message" );
        img.src = "new_path";
        break;
    default: break;
}