我有一个我创建的功能来显示水果和蔬菜。该函数应该同时返回多个元素,但我一直在尝试返回值时遇到障碍。我的代码是:
任何人都可以看到我的函数中的错误吗?
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>
提前致谢!
最佳答案
为了达到预期的结果,请使用下面提到的 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;
}
}
}
关于Javascript 一次执行多个操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49136767/