JavaScript中的/ In循环

Question

我的delivInfo元素值未定义。 ids匹配html文件，但我得到一个空白输出。有点失落了。

编辑：https://plnkr.co/edit/tTQVvr8MxBsAkzhHxRlz?p=catalogue 的HTML代码

"use strict"; // interpret document contents in JavaScript strict mode 
 

 
var delivInfo = {}; 
 
var foodInfo = {}; 
 
var delivSummary = document.getElementById("deliverTo"); 
 
var foodSummary = document.getElementById("order"); 
 

 
function processDeliveryInfo() { 
 
\t var prop; 
 
\t delivInfo.name = document.getElementById("nameinput").value; 
 
\t delivInfo.addr = document.getElementById("addrinput").value; 
 
\t delivInfo.city = document.getElementById("cityinput").value; 
 
\t delivInfo.email = document.getElementById("emailinput").value; 
 
\t delivInfo.phone = document.getElementById("phoneinput").value; 
 
\t 
 
\t 
 

 
\t 
 
\t for (prop in delivInfo) { 
 
\t \t delivSummary.innerHTML += "<p>" + delivInfo[prop] + "<p>"; 
 
\t } 
 
} 
 

 
function previewOrder() { 
 
\t processDeliveryInfo(); 
 
\t document.getElementById("previewblock").style.display = "block"; 
 
}

文档完成加载呼叫previewOrder后

Answer 1

。

document.addEventListener('DOMContentLoaded', function() { 
 
    previewOrder(); 
 
});

Answer 2

你可以试试这个

var delivInfo = {}; 
 
var foodInfo = {}; 
 
var delivSummary = document.getElementById("deliverTo"); 
 
var foodSummary = document.getElementById("order"); 
 

 
function processDeliveryInfo() { 
 
    delivInfo.name \t = document.getElementById("nameinput").value; 
 
    delivInfo.addr \t = document.getElementById("addrinput").value; 
 
    delivInfo.city \t = document.getElementById("cityinput").value; 
 
    delivInfo.email = document.getElementById("emailinput").value; 
 
    delivInfo.phone = document.getElementById("phoneinput").value; 
 

 
    var html = ''; 
 

 
    html+='<p>Name : '+delivInfo.name+'</p>'; 
 
    html+='<p>Address : '+delivInfo.addr+'</p>'; 
 
    html+='<p>City : '+delivInfo.city+'</p>'; 
 
    html+='<p>Email : '+delivInfo.email+'</p>'; 
 
    html+='<p>Phone : '+delivInfo.phone+'</p>'; 
 
\t 
 
    delivSummary.innerHTML = html; 
 
}

<p id="deliverTo"></p> 
 
<p id="order"></p> 
 

 
<input id="nameinput" placeholder="Customer Name"/> 
 
<input id="addrinput" placeholder="Customer Address"/> 
 
<input id="cityinput" placeholder="Customer City"/> 
 
<input id="emailinput" placeholder="Customer Email"/> 
 
<input id="phoneinput" placeholder="Customer Phone"/> 
 

 
<button onclick="processDeliveryInfo()">Show</button>

注：您将delivInfo = {}定义为对象。您没有定义对象数组。所以，不需要使用Loops这种情况。