Question

我把一个购物篮放在一起，然后首先实现添加项目。

但是出于某种原因，当它将值推送到数组时，它只创建2个对象，而它只应该向数组推送1。我无法弄清楚为什么！它将数据作为一个对象精确地发送到数组，然后另一个对象的值未定义。

JS

//Create object for everything to run in as this reduces namespace problems if I add anything later
var shop = {};

//Items table
shop.output = document.getElementById('output');

//Create array for items to be stored
shop.items = [];

//Constructor for items
shop.addItem = function(title, description, price) {
    'use strict';
    this.title = title;
    this.description = description;
    this.price = price;
    //Adds values from contructor to array
    shop.addToArray(title, description, price)
}

shop.addToArray = function (t,d,p) {
    'use strict';
    var item = {title: t, description: d, price: p};
    shop.items.push(item);
}


shop.addToTable = function() {
    'use strict';
    for (var i = 0; i < shop.items.length; i++){
            shop.output.innerHTML += '<tr><td>' + shop.items[i].title + '</td><td>' + shop.items[i].description + '</td><td>' + shop.items[i].price + '</td><tr>'; 
    }
}

shop.process = function() {
    'use strict';
    var title = document.getElementById('title').value;
    var description = document.getElementById('description').value;
    var price = document.getElementById('price').value;
    //send item to constructor
    var user = new shop.addItem (title, description, price);
    shop.addItem()
    console.log(shop.items);
    shop.addToTable()
}



function init() {
    'use strict';
    //Add event listeners for when user clicks add item
    document.getElementById("addItemBtn").addEventListener("click", shop.process);

} // End of init() function.
//On window load call init function
window.onload = init;

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Shopping Basket</title>
</head>
<body>

   <div id="input">
        <form action="#" method="post" id="additem" class="basic-grey">
            <label for="title">
                <span>Title:</span>
                <input type="text" name="title" id="title" required>
            </label>
            <label for="description">
                <span>Name:</span>
                <input type="text" name="description" id="description" required>
            </label>
            <label for="price">
                <span>Price: £</span>
                <input type="text" name="price" id="price" required>
            </label>
            <label for="submit" align="center">
                <input type="button" value="Add Item!" id="addItemBtn" class="btn blue">
            </label>
        </form>
    </div>

    <div id="items" align="center">
        <table id="output" class="table">
            <th>Item</th>
            <th>Description</th>
            <th>Price £</th>
        </table>
    </div>

<script src="js/app.js"></script>
</body>
</html>

Answer 1

问题在于：

var user = new shop.addItem (title, description, price);
shop.addItem()

这是两次调用shop.addItem()：一次作为构造函数，使用参数title，descriptor和price，第二次作为普通方法，不带参数。它是插入空项的第二个调用（因为所有参数都是未定义的）。

Answer 2

查看您的shop.process()功能。

使用

行添加第一个（好）项目

var user = new shop.addItem (title, description, price);

然后添加一个带有

行的undefined项

shop.addItem()

没有测试你的代码，我相信

var user = new shop.addItem (title, description, price);

根本不会返回新对象，只是调用addItem方法。

Javascript将2个对象添加到数组而不是一个。一个是未定义的

2 个答案: