Javascript一次执行多个操作_Javascript_Function_Select

Javascript一次执行多个操作

javascript function select

Javascript一次执行多个操作,javascript,function,select,Javascript,Function,Select,我创建了一个函数来显示水果和蔬菜。这个函数应该同时返回几个元素，但我一直在尝试返回值。我的代码是：有人能看到我函数中的错误吗函数fetchDetails（）{ var x=document.getElementById（“食品”）.value； var str=“” for（颜色的变量颜色）{ str+=“”+项+“” }; 变量foodtype={ 苹果| |橙| |香蕉：{ 食品名称：“水果”， img:'http://example.com/fruit.jpg', 食物短缺：“FRU

我创建了一个函数来显示水果和蔬菜。这个函数应该同时返回几个元素，但我一直在尝试返回值。我的代码是：

有人能看到我函数中的错误吗

函数fetchDetails（）{
var x=document.getElementById（“食品”）.value；
var str=“”
for（颜色的变量颜色）{
str+=“”+项+“”
};
变量foodtype={
苹果| |橙| |香蕉：{
食品名称：“水果”，
img:'http://example.com/fruit.jpg',
食物短缺：“FRU”，
颜色：[“红色”、“橙色”、“绿色”]
},
茄子、黄瓜、菠菜：{
食品名称：“蔬菜”，
img:'http://example.com/vegetable.jpg',
食物短缺：“蔬菜”，
颜色：[“绿色”、“紫色”、“红色”]
},
};
var f=食物类型[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；
}

好吧，如果你能把你的对象改成

<html>

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

<script>
function fetchDetails() {
  var x = document.getElementById("food").value;
  var str = ""
  for (var color of colors) {
    str += "<option>" + item + "</option>";
  };

  var foodtype = {
  Apple : {
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
     Orange:{
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
     Banana:{
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
    Eggplants : {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    },
    Cucumber : {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    },
    Spinach: {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    }
  };

  f = foodtype[x];
  console.log(f);
  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;
}
fetchDetails();
</script>


</body>
</html>

为了达到预期的效果，请使用下面提到的JSON格式并在数组中循环，并使用colors对象和图像进行显示

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"]
},
];

代码示例-

JS:

函数fetchDetails（）{
var x=document.getElementById（“食品”）.value；
变量foodtype=[{
商品：[‘苹果’、‘橘子’、‘香蕉’]，
食品名称：“水果”，
img:'https://www.w3schools.com/w3css/img_lights.jpg',
食物短缺：“FRU”，
颜色：[“红色”、“橙色”、“绿色”]
},
{
商品：[“茄子”、“黄瓜”、“菠菜”]，
食品名称：“蔬菜”，
img:'https://www.w3schools.com/w3css/img_forest.jpg',
食物短缺：“蔬菜”，
颜色：[“绿色”、“紫色”、“红色”]
},
];
对于（var i=0；i

请修正代码的缩进，以帮助我们更轻松地阅读。此外，请解释您的代码的作用以及您希望它如何以不同的方式工作？首先，我看不出您要返回什么。因此，作为对象键的

Apple | | | Orange | | Banana

可能无法满足您的要求。不知道你在追求什么，那么你在那里的意图是什么？要将同一对象分配给这些键中的每一个键？json属性颜色的语法错误，后面应该跟“：”而不是“=”我不完全确定在发布后如何编辑格式，但该函数旨在返回特定的，以及在“食物”中输入特定的单词（如苹果或橙色）时返回特定的输入字段。伟大的代码-谢谢！不幸的是，颜色选择字段没有响应值的更改。你知道我该怎么解决这个问题吗？你是怎么安排活动的？我这样做了，当我改变值时它会触发。在fetchdetails（）函数中，还使用了一个名为“item”的变量，该变量未定义。是item=x吗？我在“food”输入字段中添加了onkeyup=“fetchDetails（）”以填充所有其他字段。感谢您指出，item变量应该是color。太棒了！非常感谢你。您的代码运行得非常好。您知道如何将选项标题作为值添加到中吗？e、红色？“+color+”那太好了——我毫无问题地加上了它。看起来这些选项不是可以选择的吗@纳加赛A@PhysicsIsRelativelyCool，未获取，它在下拉列表中显示颜色，您可以选择

  var expanded = expand(foodtype);

  f = expanded[x];
  console.log(f);
  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;

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"]
},
];

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;
   }
}

}