Trying to display an image depending on what user selects from dropdown list. Right now, it only displays image 2 when I select image 1 and I can not figure out what the problem is.
<HTML>
<BODY>
Chose an image:
<select id = "choice">
<option>Image 1</option>
<option>Image 2</option>
</select>
<button onclick = "showImage()">Show image</button>
<img src = " " id = "chosenImage" width = 250 height = 250>
<script>
function showImage(){
var dropDownName = document.getElementById("choice");
var imageChosen = dropDownName.options[dropDownName.selectedIndex].text;
if (imageChosen == "image 1"){
document.getElementById("chosenImage").src = "land.jpg";
}else{
document.getElementById("chosenImage").src = "code.png";
}
}
</script>
</BODY>
</HTML>
You can just add a value attribute to the option elements then use that as your basis for identifying what to show.
1st Example:
<html>
<body>
Chose an image:
<select id = "choice">
<option value="default">Default</option>
<option value="image_1">Image 1</option>
<option value="image_2">Image 2</option>
</select>
<button onclick = "showImage()">Show image</button>
<img src="https://4197r62cmrjs32n9dndpi2o1-wpengine.netdna-ssl.com/wp-content/uploads/2020/07/square-placeholder.jpg" id="chosenImage" width='250' height ='250'>
<script>
function showImage() {
var dropDownName = document.getElementById("choice");
var imageChosen = dropDownName.options[dropDownName.selectedIndex].value;
if (imageChosen == "image_1"){
imageChosen = "https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png";
} else if (imageChosen == 'image_2') {
imageChosen = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png';
} else {
imageChosen = "https://4197r62cmrjs32n9dndpi2o1-wpengine.netdna-ssl.com/wp-content/uploads/2020/07/square-placeholder.jpg";
}
document.getElementById("chosenImage").src = imageChosen;
}
</script>
</body>
</html>Alternatively, you can just shorten it by placing the path to your image in the value attribute as shown below.
2nd Example:
<html>
<body>
Chose an image:
<select id="choice">
<option value="https://4197r62cmrjs32n9dndpi2o1-wpengine.netdna-ssl.com/wp-content/uploads/2020/07/square-placeholder.jpg">Default</option>
<option value="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png">Image 1</option>
<option value="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png">Image 2</option>
</select>
<button onclick="showImage()">Show image</button>
<img src="https://4197r62cmrjs32n9dndpi2o1-wpengine.netdna-ssl.com/wp-content/uploads/2020/07/square-placeholder.jpg" id="chosenImage" width='250' height='250'>
<script>
function showImage() {
var dropDownName = document.getElementById("choice");
var imageChosen = dropDownName.options[dropDownName.selectedIndex].value;
document.getElementById("chosenImage").src = imageChosen;
}
</script>
</body>
</html>the problem is
if (imageChosen == "image 1"){
it should be
if (imageChosen == "Image 1"){
with I capitalize