Estoy tratando de hacer un sitio que muestre un cuadro de selección, y cuando seleccionas el personaje correcto, muestra la imagen de ese personaje. En el futuro, buscaré un archivo JSON grande con el formato a continuación, pero estoy haciendo las cosas poco a poco porque todavía estoy aprendiendo.
Aprendí que el bucle for...in debería obtener los valores de cada propiedad, pero regresan como 'indefinidos'. ¿Por qué es así y cómo puedo solucionarlo?
<!DOCTYPE html> <html> <head> <title>Add Option From Array</title> <meta charset="windows-1252"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <select id="select" onchange="switchImage();"></select> <img src="https://abimon.org/dr/busts/aoi/00.png" id="charImg" alt="blank" /> <script> var imageList = new Array(); imageList[0] = new Image(); imageList[0].src = "https://abimon.org/dr/busts/aoi/00.png"; imageList[1] = new Image; imageList[1].src = "https://abimon.org/dr/busts/akane/00.png"; imageList[2] = new Image; imageList[2].src = "https://ik.imagekit.io/drrp/sprites/angie/00.png"; var select = document.getElementById("select"), drnames = '{"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"}', arr, i = 0; for (var x in drnames){ arr[i] = drnames[x]; i++; console.log(arr[i]); } /*arr = ["Aoi Asahina", "Akane Owari", "Angie Yonaga"];*/ for (var i = 0; i < arr.length; i++) { var option = document.createElement("OPTION"), txt = document.createTextNode(arr[i]); option.appendChild(txt); option.setAttribute("value", arr[i]); select.appendChild(option); } function switchImage() { var index = document.getElementById("select").selectedIndex; charImg = document.getElementById("charImg"); charImg.src = imageList[index].src; } </script> </body> </html>Estaba recogiendo mi doner, aquí está la explicación que falta:
drnamesarr no se había inicializado para ser una matriz. <!DOCTYPE html> <html> <head> <title>Add Option From Array</title> <meta charset="windows-1252"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <select id="select" onchange="switchImage();"></select> <img src="https://abimon.org/dr/busts/aoi/00.png" id="charImg" alt="blank" /> <script> var imageList = new Array(); imageList[0] = new Image(); imageList[0].src = "https://abimon.org/dr/busts/aoi/00.png"; imageList[1] = new Image; imageList[1].src = "https://abimon.org/dr/busts/akane/00.png"; imageList[2] = new Image; imageList[2].src = "https://ik.imagekit.io/drrp/sprites/angie/00.png"; var select = document.getElementById("select"), drnames = {"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"}, arr=[], i = 0; for (var x in drnames){ arr[i] = drnames[x]; console.log(arr[i]); i++; } /*arr = ["Aoi Asahina", "Akane Owari", "Angie Yonaga"];*/ for (var i = 0; i < arr.length; i++) { var option = document.createElement("OPTION"), txt = document.createTextNode(arr[i]); option.appendChild(txt); option.setAttribute("value", arr[i]); select.appendChild(option); } function switchImage() { var index = document.getElementById("select").selectedIndex; charImg = document.getElementById("charImg"); charImg.src = imageList[index].src; } </script> </body> </html>Volviendo a esta publicación, me doy cuenta de que puedes hacer el mismo trabajo con menos código:
const images =["https://abimon.org/dr/busts/aoi/00.png","https://abimon.org/dr/busts/akane/00.png","https://ik.imagekit.io/drrp/sprites/angie/00.png"], [sel,img]=["select","charImg"].map(id=>document.getElementById(id)), drnames = {"aoi": "Aoi Asahina", "akane": "Akane Owari", "angie": "Angie Yonaga"}; sel.innerHTML=Object.values(drnames).map(nam=>`<option>${nam}</option>`).join(); (sel.onchange=()=>img.src=images[sel.selectedIndex])(); #charImg {width:200px} <select id="select"></select> <img id="charImg">