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.
Here is the link http://ciswebs.smc.edu/cis54/tyson_schweidel/SwitchSunGuy.htm
and the code:
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) {
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;
}
}
</script>
</head>
<body>
<img src="items/Sun0.jpg" id="pic" alt="A funny face with question mark above.">
<p> Make selection to change the image.</p>
<form name = "sunPic" action="">
<select name="sunPic" onChange="changepic(this.value);">
<option alt="funny face" value="0">Select</option>
<option alt="happy face" value="1">Happy</option>
<option alt="sad face" value="2">Sad</option>
<option alt="cool face" value="3">Cool</option>
<option alt="puzzled face" value="4">Unsure</option>
</select>
</form>
</body>
<html>
I fixed the select below — I did not change it to make a different picture (since you did not give urls). I’ll that part of it to you — but maybe this will help with the frustration. NOTE: There can only be one id of any given value on a page.
Here is the working fiddle: http://jsfiddle.net/KdebH/
Next steps:
for each case in the switch add code to
then you are done.