using javascript in a drop down menu

**jmarsh** · 10-20-2012 11:42 PM

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>
<html>
<head>
<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.";
break;
case 1:
if (decision == 1) {
curSun = 1;
message = "I'm glad you are happy.";
}
break;
case 2:
if (decision == 2) {
curSun = 2;
message = "I'm sorry you are sad.";
}
break;
case 3:
if (decision == 3) {
curSun = 3;
message = "It's great you are feeling cool.";
}
break;
case 4:
if (decision == 4) {
curSun = 4;
message = "I hope you get past that soon!";
}
break;
}

document.getElementById("sunimg").src = "sun" + curSun + ".jpg";
if (message != "")
alert(message);
}
</script>
<style>
body {text-align: center;
background-color: orange;
}

</style>
</head>
<body>
<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>
</select>
</div>
</body>

</html>

**Logic Ali** · 10-21-2012 09:36 AM

First the onclick event isn't standard for the <option> tag, so always use onchange on the <select> tag.
Your global variable is unnecessary.

Code:

<select onchange = "changeSun( this.selectedIndex )" >

The selectedIndex property means you don't have to hard code choices into a switch-case, so you can lose it in favour of arranging your messages as an array, which can be indexed by the parameter sent to the function. The parameter can also be used to build your image filename.

**jmarsh** · 10-21-2012 02:54 PM

Thanks! that is a lot of great information and I'm appreciative of your response. The assignment asks that we use a switch construct though so is that code applicable to the code using a switch construct?

**jmarsh** · 10-21-2012 02:56 PM

oh yeah the assignment says we have to have a global variable, is it correct how I set mine up, or did I make a big mistake?

**Logic Ali** · 10-21-2012 04:11 PM

Originally Posted by jmarsh

oh yeah the assignment says we have to have a global variable, is it correct how I set mine up, or did I make a big mistake?

Nothing needs a global variable and it's bad advice to suggest one. Teacher doesn't agree? Send him/her here.

**Logic Ali** · 10-21-2012 04:22 PM

Originally Posted by jmarsh

oh yeah the assignment says we have to have a global variable, is it correct how I set mine up, or did I make a big mistake?

You're not assigning it a value until a selection has been made (subject to the onclick event being supported), which is too late.

Thread: using javascript in a drop down menu

Thread Tools

Display

using javascript in a drop down menu

thanks!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions