Question

我已经完成并研究了所有内容，但是在追加后div仍未显示.Chrome控制台显示没有错误。请帮帮我。

我做错了什么？

var orderlist=document.getElementById("order-list-cont");
window.onload=function() {
	if (menu.x>0){
		for(i = 1; i <= menu.x; ){

			var div=document.createElement("div");
			div.className="col-md-6 col-food";

			var img=document.createElement("img");
			var y='item'+i;
			
			img.src=menu[`${y}`].picture;
			img.className="imag";

			var h6=document.createElement("h6");
			h6.innerHTML=menu[`${y}`].delicacy;

			var input=document.createElement("input");
			input.type="text";
			input.value=1;

			var button=document.createElement("button");
			button.className="btn";
			button.innerHTML="Place Order";

			div.appendChild(img);
			div.appendChild(h6);
			div.appendChild(input);
			div.appendChild(button);
			orderlist.appendChild(div);

			i+=1;
			console.log(y);
		}
	}
};

即使console.log（y）也没有返回任何值。

修改这是上面代码的剩余部分。菜单，x和其他属性定义良好。伙计们，我真的很感谢你的帮助。

var add = document.getElementById("add");

var menu={
		x:0,
};

if (add!=null){
add.onclick=function(){
		var x=document.getElementById("DELICACY").value;
		var y=document.getElementById("QUANTITY").value;
		var z=document.getElementById("PRICE").value;
		var u=document.getElementById("PICTURE").value;
		menu.x+=1;
		var k=menu.x;
		var name= "item"+k;
		menu[`${name}`]={"x":k, "delicacy":x, "quantity":y, "price":z, "picture":u};
		console.log(menu);
};
}

Answer 1

您的menu.x属性未设置为大于0.而不是在对象上使用属性，使用for of循环遍历对象。如果对象仅包含您要显示的项目，那将是理想的，但还要检查以确保存在属性picture和delicacy。

var orderlist = document.getElementById("order-list-cont"),
  menu = {
    item1: {
      picture: 'https://placeimg.com/50/50/any',
      delicacy: 'roses'
    },
    item2: {
      picture: 'https://placeimg.com/50/50/any',
      delicacy: 'fish'
    },
    item3: {},
    item: {},
    otherProp: true
  };

for (let key of Object.keys(menu)) {
  let item = menu[key];
  if (item.picture == null || item.delicacy == null) continue;

  var div = document.createElement("div");
  div.className = "col-md-6 col-food";

  var img = document.createElement("img");
  img.src = item.picture;
  img.className = "imag";

  var h6 = document.createElement("h6");
  h6.innerHTML = item.delicacy;

  var input = document.createElement("input");
  input.type = "text";
  input.value = 1;

  var button = document.createElement("button");
  button.className = "btn";
  button.innerHTML = "Place Order";

  div.appendChild(img);
  div.appendChild(h6);
  div.appendChild(input);

  div.appendChild(button);
  orderlist.appendChild(div);
};

<div id="order-list-cont"></div>

附加的子元素未使用javascript

1 个答案: