Using switch case statement to change an image from a drop down list selection
<p>My homework is to create a web page that displays an image and a drop down list, using a javascript switch statement. The code is written so that when a selection in the drop down list is made the image on the page will change to reflect the selection and an alert box will display a unique message for the selected image. I created switch case statements with a break between each case. The last case is a default with it's own alert message. I declared a global variable. In the body section I gave the select element id's and values for each option. You will see a function above the switch case statement commented out because it didn't work. None of the other cases nor their alerts display. But the code partially works. The page image and the drop down list displays. I just can't seem to get the image to change and the alert boxes to display. I've been at it for at least twenty hours yesterday and today. I could use some help. Suggestions? Since yesterday I've tried using multiple parameters in the function as well as in the switch. What happens is that the alert boxes stop displaying or go to default. I'm thinking the answer to change the page content i.e. the images in the drop down list may be in the form. I tried document.getElementById("pic").value and used it in the function and in the switch but it didn't work. So I'm stumped. Here is my changes. If anybody can give me some more hints, I'd appreciate. Like I said everything works except the page content is not changing in the switch.</p>

<p>Here is the link <a href="http://ciswebs.smc.edu/cis54/tyson_schweidel/SwitchSunGuy.htm" rel="nofollow">http://ciswebs.smc.edu/cis54/tyson_schweidel/SwitchSunGuy.htm</a>
and the code:</p>

<p>The code sections are javascript which contain the switch case statement. The body sections contains the select element which is the drop down menu.
    
    
    
    
    var inobj,sunPic;
     function changepic(inobj, sunPic) {</p>

<pre><code> switch (inobj){

 case "0":
    sunPic ="1";
    alert("Please make a selection or go back to bed.");
    break;

  case "1":
    document.getElementById("pic").innerHTML = 2;
    alert("I am glad you are happy.");
    break;

  case "2":
   sunPic ="3";
    alert("I am sorry you are sad.");
    break;

  case "3":
   sunPic= "4";
    alert("It is great you are feeling cool.");
    break;

  case "4":
   sunPic= "5";
    alert("I hope you get past that soon.");
    break;
  default:
    alert("You need to fix something!");
    break;
  }
  } 


  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src="items/Sun0.jpg" id="pic" alt="A funny face with question mark above."&gt;
&lt;p&gt; Make selection to change the image.&lt;/p&gt;
&lt;form name = "sunPic" action=""&gt;
&lt;select name="sunPic" onChange="changepic(this.value);"&gt;
&lt;option  alt="funny face" value="0"&gt;Select&lt;/option&gt;
&lt;option  alt="happy face" value="1"&gt;Happy&lt;/option&gt;
&lt;option  alt="sad face"   value="2"&gt;Sad&lt;/option&gt;
&lt;option  alt="cool face"  value="3"&gt;Cool&lt;/option&gt;
&lt;option  alt="puzzled face" value="4"&gt;Unsure&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;html&gt;
</code></pre>
