Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Beginning JavaScript 5th Edition
This is the forum to discuss the Wrox book Beginning JavaScript, 5th Edition by Jeremy McPeak; 978-1-118-90333-9
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript 5th Edition section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old November 15th, 2016, 02:38 PM
Registered User
Points: 5, Level: 1
Points: 5, Level: 1 Points: 5, Level: 1 Points: 5, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2016
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Red face 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?
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>

Last edited by Wolfman50; November 15th, 2016 at 06:19 PM..


Similar Threads
Thread Thread Starter Forum Replies Last Post
Select row in GridView WITHOUT using Select button rao965 ASP.NET 2.0 Professional 1 February 15th, 2008 10:44 AM
Fill select box and select recordset value markd Classic ASP Databases 1 February 20th, 2006 06:41 PM
picture rajuru PHP Databases 1 October 18th, 2004 08:56 PM
select="node1", select="node2"... Baldo XSLT 7 March 12th, 2004 10:38 AM
OLE picture - accessing the picture property bdcrisp Excel VBA 0 December 7th, 2003 09:35 PM





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