Question

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

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]
        }
    }
}

Answer 1

上面代码中的问题是这一行

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

正在替换div#demo3的内容而非附加，因此请改用此行

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

以下是jsfiddle中的一个工作示例。

我没有遇到[object,object]问题。如果您可以发布您的HTML代码问题，可以轻松识别。

<强>更新

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

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

检查此更新的jsfiddle。

Answer 2

<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>

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

2 个答案: