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>
Select to different picture
