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這種情況。