Fatal编程技术网
  • javascript/
  • 如何使用javascript在HTML中显示数组中访问的（thru for loop）对象

如何使用javascript在HTML中显示数组中访问的（thru for loop）对象

javascript html arrays object

如何使用javascript在HTML中显示数组中访问的（thru for loop）对象,javascript,html,arrays,object,multidimensional-array,Javascript,Html,Arrays,Object,Multidimensional Array,我有一个来自HTML的表单。表单中的输入数据将进入我在JS中创建的多维数组。然后我将使用for循环访问数组中的对象，以便在HTML分区中显示对象值。在HTML中，它只显示[对象，对象] var data = []; var i, item; function myForm(event){ event.preventDefault(); var name = document.getElementById("name").value; //Getting Values fro

我有一个来自HTML的表单。表单中的输入数据将进入我在JS中创建的多维数组。然后我将使用for循环访问数组中的对象，以便在HTML分区中显示对象值。在HTML中，它只显示
[对象，对象]

var data = [];  
var i, item;

function myForm(event){
    event.preventDefault();
    var name = document.getElementById("name").value; //Getting Values from the form of HTML
    var phone = document.getElementById("phone").value; //Getting Values from the form of HTML
    var bday = document.getElementById("bday").value; //Getting Values from the form of HTML
    var email = document.getElementById("email").value; //Getting Values from the form of HTML
    var pWord = document.getElementById("pWord").value; //Getting Values from the form of HTML
    var age = document.getElementById("bday").value; //Getting Values from the form of HTML
    var ageValue;
    var Bdate = document.getElementById("bday").value; //Getting Values from the form of HTML and calculating the age of the user
    var Bday = +new Date(Bdate);
    ageValue = ~~ ((Date.now() - Bday) / (31557600000));
    var theBday = document.getElementById("age");
    theBday.innerHTML = ageValue;


    var userObject = {
        name: name,
        phone: phone,
        bday: bday,
        email: email,
        pWord: pWord,
        ageValue: ageValue,

    }; //The values i get from my Input in html. The userObject will be in a array data[]
       data.push(userObject);

      for (i=0 ; i <data.length ; i++){
        for (item in data[i]){
            document.getElementById("demo3").innerHTML=(item + data[i][item]);  //I'm trying to display the details from my form but the only thing show up is [object,object]
        }
    }
}

var数据=[]；
变量i，项目；
函数myForm（事件）{
event.preventDefault（）；
var name=document.getElementById（“name”）.value；//从HTML格式获取值
var phone=document.getElementById（“phone”）.value；//从HTML格式获取值
var bday=document.getElementById（“bday”）.value；//从HTML格式获取值
var email=document.getElementById（“email”）.value；//从HTML格式获取值
var pWord=document.getElementById（“pWord”）.value；//从HTML格式获取值
var age=document.getElementById（“bday”）.value；//从HTML格式获取值
风险价值；
var Bdate=document.getElementById（“bday”）.value；//从HTML格式获取值并计算用户年龄
var b日期=+新日期（b日期）；
ageValue=~（（Date.now（）-Bday）/（31557600000））；
var theBday=document.getElementById（“年龄”）；
theBday.innerHTML=年龄值；
var userObject={
姓名:姓名,，
电话:电话,，
B日：B日，
电邮:电邮,，
普沃德：普沃德，
ageValue:ageValue，
}；//从html中输入的值。userObject将位于数组data[]
数据推送（userObject）；

对于（i=0；i以上代码中的问题是这一行


document.getElementById("demo3").innerHTML=(item + data[i][item]);


这将替换
div#demo3
的内容，而不是追加，因此请使用此行


document.getElementById("demo").innerHTML+=(item + data[i][item]);


下面是一个在中工作的示例

我没有遇到
[object，object]
问题。如果你能发布你的html代码，问题就很容易被识别出来

更新

再次运行循环之前，请清除
div#demo
的内容


document.getElementById("demo").innerHTML = "";


检查此更新。

报名表


姓名：



电话号码：



生日：



电邮：



密码：



提交
重置


结果
名称：

电话号码：

生日：

电子邮件：

密码：

年龄：






你能发布你的html@mabhijith95a10姓名：
电话号码：
生日：
电子邮件：
密码：
提交>
@mabijith95a10抱歉，我不能将其作为代码发布，我可以将结果附加到另一个div中吗？实际上，您的代码可以工作，但每当我尝试提交其他用户时，输出都会重复data@mabhijith95a10这是我的html代码，当我尝试你的代码时，它可以工作，谢谢。但问题是，每当我再次尝试提交时，显示会重复。我将sh我可以为另一个用户附加另一个div，并且输出不会与第一个输出重复

<body>
    <div id="navBar">
        <a href="signUp.html">HOME</a>
        <a href="signUp.html">LOG IN</a>
        <a href="signUp.html">SIGN UP</a>
    </div>

    <center><h1>Sign Up Form</h1></center></br></br>

<div id="format">
    <form id="myForm" onsubmit="myForm(event)">
    <b>Name:</b></br>
        <input type="text" name="name" id="name" maxlength="50" required="required" value="1234"></input></br>
    <b>Phone Number:</b></br>
        <input type="phone" name="phone" id="phone" maxlength="20" required="required" value="123"></input></br>
    <b>Birthday:</b></br>
        <input type="date" name="bday" id="bday" required="required" value="2010-05-02"></input></br>
    <b>Email:</b></br>
        <input type="email" name="email" id="email" maxlength="50" required="required" value="asasa@yahoo.com"></input></br>
    <b>Password:</b></br>
        <input type="password" name="pWord" id="pWord" maxlength="50" required="required" value="fgfghff"></input></br>
    <button type="submit" name="submit" id="submit" value="Submit" onsubmit="myData()" >Submit</button>
    <button type="reset" name="reset" id="reset" value="reset">Reset</button>

    </form>
    <div>
            <p id="demo" onsubmit="myData()"></p>

        </div>
    <div id="result" onsubmit="myForm(event)">  
        <center>Result</center>
        Name:<p id="name1"></p>
        Phone Number:<p id="phone1"></p>
        Birthday:<p id="bday1"></p>
        Email:<p id="email1"></p>
        Password:<p id="pWord1"></p>
        Age:<p id="age"></p>    

    </div>
        <div id="sample">           
            <p id="demo3" onsubmit="myForm(event)"></p>
        </div>


</div>



</body>