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:
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..
Reply With Quote