View Single Post
  #1 (permalink)  
Old November 15th, 2016, 02:38 PM
Wolfman50 Wolfman50 is offline
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:
<!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 =;
				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());

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