hi I have an assignment for class where we are supposed to create a drop down list and when a selection is made from the list, execute a function. The function will decide if which item was selected in the drop down list and will change the image to that respective image and display a unique pop up alert message.
So far I got it so when you click on any of the list, the first decision where the first image(which is already there when the page loads) displays and the first alert message comes up, this happens when you select any of the options on the list. I got to figure out how to get the other selections on the list to work, is there something wrong with my global variable? Here is my code-

<!DOCTYPE html>
<title>Homework #4 Switch Sun Guy</title>
<script type="text/javascript">
var curSun= 0;

function changeSun(decision) {
// Clear the scene message
var message = "";
switch (curSun) {
case 0:
curSun = 0;
message = "Please make a selection or go back to bed.";
case 1:
if (decision == 1) {
curSun = 1;
message = "I'm glad you are happy.";
case 2:
if (decision == 2) {
curSun = 2;
message = "I'm sorry you are sad.";
case 3:
if (decision == 3) {
curSun = 3;
message = "It's great you are feeling cool.";
case 4:
if (decision == 4) {
curSun = 4;
message = "I hope you get past that soon!";

document.getElementById("sunimg").src = "sun" + curSun + ".jpg";
if (message != "")
body {text-align: center;
background-color: orange;

<div style="margin-top:100px; text-align:center">
<img id="sunimg" src="sun0.jpg" alt="Sun with question mark" /><br />
<select name="mydropdown">
<option id="decision0" value="Select" onclick="changeSun(0)">Select</option>
<option id="decision1" value="Happy" onclick="changeSun(1)">Happy</option>
<option id="decision2" value="Sad" onclick="changeSun(2)">Sad</option>
<option id="decision3" value="Cool" onclick="changeSun(3)">Cool</option>
<option id="decision4" value="Unsure" onclick="changeSun(4)">Unsure</option>