Question

当触发添加方法的侦听器“ buttAdd.addEventListener”时：，第一个条件多次起作用（与第二个条件一起起作用）：

if (inputsAdd [0].value ===""||inputsAdd [1].value ===""||inputsAdd [2]
.value === "") 
{alert ("fill all fields");}

当字段不为空，然后添加产品时，它可以工作。而且，如果您单击带有空白字段的添加按钮，那么先前添加的产品将丢失。与方法相同的故事，删除。请帮我修复它

//Product Creation Class
class Product {
    constructor(name, count, price) {
        this.name = name;
        this.count = count;
        this.price = price;
    }
}
Product.SORT_ORDER_ASC = 1;
Product.SORT_ORDER_DESC = -1;
// Сlass where products are recorded
class Shop {
    constructor() {
        this.products = [];
        this.formAdd = document.forms[0];
        this.inputsAdd = this.formAdd.elements;
        this.buttAdd = this.formAdd.elements[3];
        this.formDelete = document.forms[1];
        this.nameDelete = this.formDelete.elements[0];
        this.buttDelete = this.formDelete.elements[1];

    }

    //method for adding a product
    addProduct(newProduct) {
        this.products.push(newProduct);
    }

    //method for remove product by name
    deleteProductByName(productName) {
        let i = this.products.length;
        while (i--) {
            if (productName === this.products[i].name) {
                this.products.splice(i, 1);
            }
        }
    }

    // get total price by all products
    get totalProductsPrice() {
        return this.products.map(product => product.price).reduce((p, c) => p + c);
    }

    //method for sorting the product at its price
    sortProductsByPrice(sortOrder) {
        const sorted = this.products.sort((a, b) => {
            return a.price > b.price ? sortOrder : -sortOrder;
        });
        this.products = sorted;
    }

    // method to draw the table with product property (
    // name, count, price)
    show() {
        // add new product by click
        this.buttAdd.addEventListener('click', (e) => {
            e.preventDefault();
            if (this.inputsAdd[0].value === "" || this.inputsAdd[1].value === "" || this.inputsAdd[2].value === "") {
                alert("fill all fields");
            } else {
                this.addProduct(new Product(this.inputsAdd[0].value, parseInt(this.inputsAdd[2].value),
                    parseInt(this.inputsAdd[1].value)));
                this.show();
                this.inputsAdd[0].value = "";
                this.inputsAdd[1].value = "";
                this.inputsAdd[2].value = "";
            }
        }, false);
        // delete product by name after click
        this.buttDelete.addEventListener('click', (e) => {
            e.preventDefault();
            if (this.nameDelete.value === "") {
                alert("write a name of product what you want to delete");
            } else {
                this.deleteProductByName(this.nameDelete.value);
                this.show();
                this.nameDelete.value = "";
            }

        }, false);
        const rows = document.querySelectorAll("#shop .data");
        for (let i = rows.length - 1; i >= 0; i--) {
            const e = rows.item(i);
            e.parentNode.removeChild(e);
        }
        const table = document.getElementById("shop");
        const tFoot = table.querySelector('tfoot');
        if (tFoot) tFoot.remove();

        for (let i = 0; i < this.products.length; i++) {
            //create table
            table.innerHTML += `<tbody><tr class="data"><td>${this.products[i].name}</td>
    <td>${this.products[i].price}</td>
    <td>${this.products[i].count}</td></tr></tbody>`;
        }
        //show total price by all products
        table.innerHTML += `<tfoot><tr><td colspan="3" id="total-price">Total price: 
        ${this.totalProductsPrice}</td></tr></tfoot>`;

//filter products by price
        document.addEventListener("click", (e) => {
            let elem = e.target;
            if (elem.id === "filter") {
                this.sortProductsByPrice(Product.SORT_ORDER_ASC);
                this.show();
            }
        }, false);
        console.log(this.products);
    }
}

let shop = new Shop();
shop.addProduct(new Product("product", 1, 2000));
shop.addProduct(new Product("product1", 2, 500));
shop.addProduct(new Product("product2", 3, 1000));
shop.show();

<div class="Shop">
    <div class="add-product">
        <h1>Add product</h1>
        <form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="text"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="text"  id="count" class="input-product">
            <button id="add" type="button">Add</button><!-- *** -->
        </form>
    </div>
    <div class="product-table">
        <h2>Products</h2>
        <form id="delete-form">
            <label for="name-delete">Delete product by name</label>
            <input type="text" id="name-delete" class="input-delete">
            <button id="delete" type="button">Delete</button>
        </form>
        <table id="shop">
            <caption>Products that are available in the store</caption>
            <tr>
                <th>Name:</th>
                <th id="filter">Price:</th>
                <th>Count:</th>
            </tr>
        </table>
    </div>
</div>

Answer 1

请参见，您正在定义let shop = new Shop()，然后在Shop类中使用此变量，例如shop.show()。我强烈建议您使用this关键字而不是范围变量（对于所有其他shop使用情况条目均有效）。

现在，大约

工作几次

我假设，当您调用show()方法时，它会在一段时间内注册更多事件侦听器。我的意思是，您调用show-它创建了新的事件侦听器+有时会自己调用（呵呵，这很有风险）。我建议您将侦听器声明移至构造函数-这样它们将被实例化一次（但这将需要保留DOM节点）。将您的显示功能拆分为几个较小的函数并摆脱自函数发射（这会降低复杂性），这也很好。

为什么添加商品的方法不正确？

1 个答案: