so I have some code set up already and for some reason I can't get the image to change when a selection is picked via the dropdown list. 5 images in total. I got it set up, but for some reason my images don't seem to come up when selected. Here's the code;

```
<script type="text/javascript">
var sunPic = 0;

function pickSun(sunimg) {
    var message = "";

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

        case "1";
            sunPic = 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's great you are feeling cool.")
            break;

        case "4";
            sunPic = 5;
            alert("I hope you get past that soon!");
            break;
    }

    document.getElementById("sunimg").src = "sun" + sunPic + ".jpg";

} <!-- end of function -->

</script>

</head>

<body>

<div id="center" style="text-align: center; margin-top: 100px;">
<img src="sun0.jpg" id="sunimg" alt="Question Sun">
<!-- start if drop down list -->
<select id="sunlist" onChange="pickSun(this.value);">
    <option value="0">Select</option>
    <option value="1">Happy</option>
    <option value="2">Sad</option>
    <option value="3">Cool</option>
    <option value="4">Unsure</option>
</select>
</div>

```

Each of my images is labeled as sun0 sun1 sun2 sun3 and sun4, all of them jpg 
I can't find the problem and I've been looking at the code for a good while now. Any suggestions?