Question

按产品名称删除产品的方法无效。我正在尝试使用buttDelete.addEventListener删除，但删除不会发生。

deleteProductByName方法的逻辑是，当从输入nameDelete收到产品名称时，将检查shop.products数组中的相同产品，然后按Delete键（buttDelete），该产品也会从数组中删除，也从表中删除，如果该字段为空，则输出警报，提示您需要填写该字段。

帮助请解决此问题

//Product Creation Class
class Product {
    constructor(name, count, price) {
        this.name = name;
        this.count = count;
        this.price = price;
    }
}
// Сlass where products are recorded
class Shop {
    constructor() {
        this.products = [];
    }

    //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 to draw the table with product property (
    // name, count, price)
    show() {
        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");
        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 id="total-price"><td colspan="3">Total price: 
        ${shop.totalProductsPrice}</td></tr></tfoot>`;
    }
}
// add new product by click
const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    e.preventDefault();
    shop.addProduct(new Product(inputsAdd[0].value, parseInt(inputsAdd[2].value),
        parseInt(inputsAdd[1].value)));
    shop.show();
}, false);
// delete product by name after click
const formDelete = document.forms[1];
const nameDelete = formDelete.elements[0];
const buttDelete = formDelete.elements[1];
buttDelete.addEventListener('click', (e) => {
    e.preventDefault();
    shop.deleteProductByName(nameDelete.value);
    shop.show();
}, false);

let shop = new Shop();
shop.addProduct(new Product("product 1", 1, 2000));
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">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

然后我将在上使用console.log()或调试器

   //method for remove product by name
   deleteProductByName(productName) {
       let i = this.products.length;
       while (i--) {
           console.log("productName " + productName + "this.products[i].name" + this.products[i].name);
           if (productName === this.products[i].name) {
               this.products.splice(i, 1);
           }
       }
   }

查看是否比较相同的名称。确保您的if语句按预期工作。

为什么不按名称删除项目的方法不起作用？

1 个答案: