Intentando mostrar una imagen dependiendo de lo que el usuario seleccione de la lista desplegable. En este momento, solo muestra la imagen 2 cuando selecciono la imagen 1 y no puedo averiguar cuál es el problema.
<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>Simplemente puede agregar un atributo de value a los elementos de option y luego usarlo como base para identificar qué mostrar.
1er ejemplo:
<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> Alternativamente, puede acortarlo colocando la ruta a su imagen en el atributo de value como se muestra a continuación.
2do Ejemplo:
<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>el problema es
if (imageChosen == "image 1"){
debería ser if (imageChosen == "Image 1"){ con mayúsculas