I'm trying to make a site that shows a select box, and when you select the right character, it shows the pic of that character. In the future, I will fetch a large JSON file with the formatting below, but I'm doing things by little since I'm still learning.
I learned that the for...in loop should get the values from each property, but they're returning as 'undefined'. Why is that the case and how can I fix it?
<!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>I was just picking up my doner - here is the missing explanation:
drnamesarr had not been initialised to be an array.<!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>Coming back to this post I realise that you can do the same job with less code:
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">