www.webdeveloper.com
Results 1 to 6 of 6

Thread: using javascript in a drop down menu

  1. #1
    Join Date
    May 2012
    Posts
    5

    using javascript in a drop down menu

    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>

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    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.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    May 2012
    Posts
    5

    thanks!

    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?

  4. #4
    Join Date
    May 2012
    Posts
    5
    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?

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by jmarsh View Post
    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.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  6. #6
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by jmarsh View Post
    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.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles