Question

我试图让一些代码正常工作。手头的任务是：

首先，创建一个表单来获取用户数据，如下所示：

<form>
    <fieldset>
        <label id="namefield">Name</label>
        <input type="text" name="firstlast" id="username">
        </br>
        <label id="address">Address</label>
        <input type="text" name="address" id="useraddress">
        </br>
        <label id="emailfield">Email</label>
        <input type="email" name="email" id="useremail">
        </br>
        <button type="submit" id="submit">Save</button>
    </fieldset>
</form>

其次，编写Javascript：

创建包含数组的JSON对象。
创建一个数据对象以存储用户输入。
创建一个onclick函数：
1. 从每个表单字段中获取值。
2. 使用所述值构造一个新对象。
3. 将对象推入JSON对象数组。
4. 将新数据添加到页面。
将数据存储在localStorage中。
检查页面加载时的localStorage并将数据写入页面（如果找到）。

JS：

// create data structure
var addressBook = {"entries": []}  // this should be JSON array object

// create data object to contain form data
function AddressBookEntry(name, address, email) {
    this.name = name;
    this.address = address;
    this.email = email;
}

// create onclick function for button
document.getElementById("submit").onclick = function() {
    // get values from each form field
    var name = document.getElementById("username").value;
    var address = document.getElementById("useraddress").value;
    var email = document.getElementById("useremail").value;

    // create new object using consturctor
    var newAddress = new AddressBookEntry(name, address, email);
    var jAddress = JSON.stringify(newAddress);

    // push new object into array
    addressBook.push(jAddress);
    localStorage.setItem("addressBook", JSON.stringify(addressBook));

    // add information to page

    // write data to the page

    // store the data

    // read from storage and write to page if data found

我能够创建JSON对象，从表单中获取数据并将其抛入构造函数中以创建新对象，然后将其转换为JSON对象，但我无法获得这个对象传递给数组，此时一切都崩溃了。

我错过了什么？

Answer 1

您正在尝试将（）推入到addressBook中，您已将其定义为其中包含数组（条目）的对象。尝试：

addressBook.entries.push( newAddress );

并注意，您不需要对newAddress进行字符串化，以便将其添加到数组或localStorage。在addressBook上使用JSON.stringify（）就足够了。

我已将onclick处理程序包装到一个函数中，该函数在页面加载时触发，以确保在尝试添加事件处理程序之前表单提交对象存在。您可以在浏览器脚本调试器中运行该页面，以测试输出到阵列中。

这是一个完整的测试：

<html>
<head>

<script type="text/javascript">



// create data object to contain form data
function AddressBookEntry(name, address, email) {
    this.name = name;
    this.address = address;
    this.email = email;
}

function go(){
    // create data structure
    var addressBook = {entries:[]};  // this should be JSON array object

    // create onclick function for button
    document.getElementById("submit").onclick = function() {
        // get values from each form field
        var name = document.getElementById("username").value;
        var address = document.getElementById("useraddress").value;
        var email = document.getElementById("useremail").value;

        // create new object using consturctor
        var newAddress = new AddressBookEntry(name, address, email);
        //var jAddress = JSON.stringify(newAddress);

        // push new object into array
        addressBook.entries.push(newAddress);
        localStorage.setItem("addressBook", JSON.stringify(addressBook));

        // add information to page

        // write data to the page
        console.log(addressBook);
        // store the data

        // read from storage and write to page if data found

        return true;
    }

    } 
</script>
</head>

<body onload="go()">

    <form>
    <fieldset>
        <label id="namefield">Name</label>
        <input type="text" name="firstlast" id="username">
        </br>
        <label id="address">Address</label>
        <input type="text" name="address" id="useraddress">
        </br>
        <label id="emailfield">Email</label>
        <input type="email" name="email" id="useremail">
        </br>
        <button type="submit" id="submit">Save</button>
    </fieldset>
</form>
</body>
</html>

Answer 2

我认为你需要做的是 addressBook.entries.push(jAddress)。

AddressBook 的类型为object not array

使用Pure JS获取输入，添加到页面和存储在localStorage中

2 个答案: