Question

强文大家好我是JavaScript的新手，我坚持这个问题，希望任何人都可以帮助你，谢谢你。我正在尝试创建一个应用程序，允许用户输入客户在餐馆消费的食物价格。首先，用户需要输入用户名。然后，当他或她单击“输入名称”按钮时，将创建新的用户对象。我创建了一个构造函数调用UserCustomer（）。当创建新对象时，如果用户想要从列表中删除客户，它将在内部创建元素，例如客户名称，价格和删除用户按钮。用户单击输入名称按钮后，用户将导航到添加食物页面。用户需要输入客户消费的食物和价格，用户可以根据需要添加任意数量，当用户点击添加食物按钮时，程序将推送食物和价格进入之前创建的新客户对象

当用户点击“完成添加”时。程序会将所有值都推送到数组“newMakanUser”。

然后最后该函数将通过此“newMakanUser”打印循环并打印出值

我得到的结果是 0：[object Object] 1：[object Object]

我想得到的结果是

例如

约翰食品：汉堡薯条可乐价格：2.4,1.5,1.0 琳达食品：沙拉果汁价格：3.5,1.0,1,6

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//This is  a New Array
var newMakanUser = [];
var newButton  = [];
var placeHolder = [];
var TempVar=[];  
var TempUSer= "";

    
    
    
    
function UserCustomer(nameU){
    this.nameUser = nameU;
    this.Food = [];
    this.Price= [];
    var button = document.createElement("button");
    button.innerHTML = "Remove " +nameU +" from list ";

// 2. Append somewhere
    var body = document.getElementsByTagName("body")[0];
    body.appendChild(button);
   
}

    
    
    

function outArray() {
        newMakanUser.toString();
        newButton.toString();
    
        function displayArrayObjects(arrayObjects,outputName) {
                    // First Check the Array Length
                    var len = arrayObjects.length, text = "";
                    this.outputName = outputName;
                   
                          //Loop through the Array

                          for (var i = 0; i < len; i++) {
                                    var myObject = arrayObjects[i];
                          //Loop through the object in side the array
                                           for (var x in myObject) {
                                            text += ( x + ": " + myObject[x] + " ");
                                                                   }
                                                           text += "<br/>";
                                                         }

                      document.getElementById(outputName).innerHTML = text;
                                                   }
  
    
    
       
                   displayArrayObjects( newMakanUser,"outputArray");
           
               
    
    
    
                      }
    
// This Function is to create an object and store it inside an array.
function addName(UserName){
    // Get the User Input Object product name
       UserName = document.getElementById("NamePax").value;
                   
            TempUSer =  UserName ;    
     
    
         TempVar.push(new UserCustomer(UserName));
         // alert( "Hello");
      //  newMakanUser.push(new myUserName(createProduct,productprice));
       slides.style.display = "block";
       slidess.style.display = "none";
       slidesss.style.display = "none";
       
    
}
    
    
function addFoodPrice(Foody,Pricey){
    
    
        Foody  = document.getElementById("FoodyName").value;
        Pricey  = document.getElementById("FoodyPrice").value;
    
     
    
          TempVar.Food.push(Foody);
          TempVar.Price.push(Pricey);
    
}
    
function doneAdd(){
    
        newMakanUser.push(TempVar);
        
        slides.style.display = "none";
        slidess.style.display = "block";
        slidesss.style.display = "block";
       // document.getElementById("outputDB").innerHTML = text;
    
}
    
 
    
// This Function will remove the unwanted object
    

</script>
</head>
<body>
<h2>Who Order  the Food</h2>
<P> <input type="button" value="Check what you order" id="" onclick="outArray();"/></P>
<p id="outputArray"></p>
<p id="outputDB"></p>
    
<div id="slidesss" style="display:block">  
<P style="color:blue;"><strong>Person Name:</strong><input type="text" style="text-align:center; margin-left:10px;"id="NamePax" name="element"  
placeholder="Person Name" ></P>
</div>
    
<div id="slides" style="display:none"> <!-- set display to none --> 
    
<P style="color:blue;"><strong>Food Name :</strong><input type="text" style="text-align:center; margin-left:10px;"id="FoodyName" name="element"  
placeholder="Food Name" ></P>
    
<P style="color:blue;"><strong>Food Price :</strong><input type="text" style="text-align:center; margin-left:10px;"id="FoodyPrice" name="element"  
placeholder="Food Price" ></P>
    
    
    
<P><input type="button"  value="Add Food" id="Btn_Close1" onclick="addFoodPrice(this.Foody, this.Pricey );"/>
<P><input type="button"  value="Done Adding" id="Btn_Close1" onclick="doneAdd();"/>
    
</div> 
    
<div id="slidess" style="display:block"> 
<P><input type="button"  value="Input Name" id="Btn_Close" onclick="addName(this.UserName );"/></P>
</div> 

    
    

</body>
</html>

Answer 1

我无法在此处运行您的代码段，因此我无法立即验证您的代码中的疑问，但看起来问题可能来自您的myObject变量函数displayArrayObjects(arrayObjects,outputName)。

确保myObject具有正确的形状，即

var myObject = {
    name: 'John',
    food: ['burger', 'cola'],
    price: [3.5, 1.1]
}

myObject[x]也可能是一个对象或数组，因此这可能就是您只打印[object Object]的原因，因此请确保您重复遍历对象的每个元素正确。使用console.log测试函数的中间变量，以查看是否所有内容都符合您所需的格式。希望这有帮助！

将新元素添加到新对象中，然后在JavaScript中打印出新对象

1 个答案: