Javascript 一次执行多个操作

Question

我有一个我创建的功能来显示水果和蔬菜。该函数应该同时返回多个元素，但我一直在尝试返回值时遇到障碍。我的代码是:

任何人都可以看到我的函数中的错误吗？

function fetchDetails() {
  var x = document.getElementById("food").value;
  var str = ""
  for (var color of colors) {
    str += "<option>" + item + "</option>"
  };
  var foodtype = {
    Apple || Orange || Banana: {
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors: ["Red", "Orange", "Green"]
    },
    Eggplants || Cucumber || Spinach: {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors: ["Green", "Purple", "Red"]
    },
  };
  var f = foodtype[x];
  document.getElementById("foodname").innerHTML = f && f.foodname;
  document.getElementById("img").src = f && f.img;
  document.getElementById("foodshort").value = f && f.foodshort;
  document.getElementById("colors").innerHTML = str;
}

<input type="text" id="food" onkeyup="fetchDetails()">
<p id="foodname"></p>
<img id="img"></img>
<input type="text" id="foodshort">
<select id="colors"></select>

提前致谢!

Answer 1

为了达到预期的结果，请使用下面提到的 JSON 格式并循环数组并使用颜色对象和图像来显示

var foodtype = [{
item:['Apple', 'Orange','Banana'], 
foodname: 'Fruit',
img: 'https://www.w3schools.com/w3css/img_lights.jpg',
foodshort: "FRU",
colors : ["Red", "Orange", "Green"]
},
 {
item:['Eggplants' , 'Cucumber' , 'Spinach'],
foodname: 'Vegetable',
img: 'https://www.w3schools.com/w3css/img_forest.jpg',
foodshort: "VEG",
colors : ["Green", "Purple", "Red"]
},
];

代码示例 - https://codepen.io/nagasai/pen/qxedOP

JS:

function fetchDetails() {
var x = document.getElementById("food").value;

var foodtype = [{
item:['Apple', 'Orange','Banana'], 
foodname: 'Fruit',
img: 'https://www.w3schools.com/w3css/img_lights.jpg',
foodshort: "FRU",
colors : ["Red", "Orange", "Green"]
},
 {
item:['Eggplants' , 'Cucumber' , 'Spinach'],
foodname: 'Vegetable',
img: 'https://www.w3schools.com/w3css/img_forest.jpg',
foodshort: "VEG",
colors : ["Green", "Purple", "Red"]
},
];

for(var i =0; i < foodtype.length; i++){
   if(foodtype[i].item.indexOf(x) != -1){
     var f = foodtype[i];
document.getElementById("foodname").innerHTML = f && f.foodname;
document.getElementById("img").src = f && f.img;
document.getElementById("foodshort").value = f && f.foodshort;
var str = ""
for (var color of f.colors) {
str += "<option>" + color + "</option>"
};
document.getElementById("colors").innerHTML = str;
   }
}

}