Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > BOOK: Beginning JavaScript 5th Edition
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old November 15th, 2016, 01: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 05:19 PM.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 09:44 AM
Fill select box and select recordset value markd Classic ASP Databases 1 February 20th, 2006 05:41 PM
picture rajuru PHP Databases 1 October 18th, 2004 08:56 PM
select="node1", select="node2"... Baldo XSLT 7 March 12th, 2004 09:38 AM
OLE picture - accessing the picture property bdcrisp Excel VBA 0 December 7th, 2003 08:35 PM



All times are GMT -4. The time now is 02:19 PM.


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