p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Beginning JavaScript 5th Edition (http://p2p.wrox.com/forumdisplay.php?f=793)
-   -   Select to different picture (http://p2p.wrox.com/showthread.php?t=99258)

Wolfman50 November 15th, 2016 02:38 PM

Select to different picture
 
Does anyone know how to use a drop down (select) list to click on one of its options and display a different picture?[:o]
Combining the Try it out on page 285 and the try it out on page 370. Here is what I have so far:
Code:

<!DOCTYPE html>
<html lang="en">
        <head>
                <title>Chapter 11, Exercise 9</title>
        </head>
        <body>
                <img src="usa.gif" id="img0" height="220px" width="300px" alt="Computer types"><br>
                <form name="form1" >
                        <label for="cpuType">Country flag: </label>
                        <select size="1" name="cpuType" id="cpuType" >
                                <option value="1" selected="selected">United States</option>
                                <option value="2">Canada</option>
                                <option value="3">Jamaica</option>
                                <option value="4">Mexico</option>
                        </select><br>
                </form>
                <script>
                        var myImages =
                        [
                                "usa.gif",
                                "canada.gif",
                                "jamaica.gif",
                                "mexico.gif"
                        ];
                        var myForm = document.form1;
                        function changeImg(e)
                        {
                                var el = e.target;
                                var cpuType = myForm.cpuType;
                                var selectedOption = cpuType.options[cpuType.selectedIndex];
                                var newImgNumber = selectedOption.value;
                                document.write("newImgNumber = " + newImgNumber + "<br>");
                                el.src = myImages[newImgNumber];
                        }
                        myForm.cpuType.addEventListener("change", changeImg());
                        changeImg();
                </script>
        </body>
</html>



All times are GMT -4. The time now is 09:51 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.