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:

<!DOCTYPE html>
<html lang="en">
                <title>Chapter 11, Exercise 9</title>
                <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>
                        var myImages =
                        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());

All times are GMT -4. The time now is 04:35 AM.

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