如何将值从输入传递到数组？

Question

我想将值从三个输入：“名称”，“计数器”和“价格”转移到数组“产品”，然后在表中显示。但是，当我使用buttAdd.addEventListener处理程序添加它们时，新元素不会显示在表格“帮助解决此问题”中

//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(products) {
        this.products = [];
    }

    //method for adding a product
    addProduct(newProduct) {
        this.products.push(newProduct);
    }

    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 += `<tr class="data"><td>${this.products[i].name}</td>
    <td>${this.products[i].price}</td>
    <td>${this.products[i].count}</td></tr>`;
        }
    }
}
const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    for (let i = 0; i <= 3; i++) {
        shop.addProduct(inputsAdd[i].value);
    }
    shop.show();
}, false);
let shop = new Shop();
shop.addProduct(new Product("product 1", 1, 2000));
shop.show();

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

Answer 1

您的addProduct（）方法将一个Product对象作为输入，但是在单击侦听器中，您将传递表单字段的输入值而没有形成对象

//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(products) {
        this.products = [];
    }

    //method for adding a product
    addProduct(newProduct) {
        this.products.push(newProduct);
    }

    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 += `<tr class="data"><td>${this.products[i].name}</td>
    <td>${this.products[i].price}</td>
    <td>${this.products[i].count}</td></tr>`;
        }
    }
}
const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    e.preventDefault();
    let tempProduct = new 
Product(inputsAdd[0].value,parseInt(inputsAdd[1].value),parseInt(inputsAdd[2].value));
        
    shop.addProduct(tempProduct);
    shop.show();
}, false);
let shop = new Shop();
shop.addProduct(new Product("product 1", 1, 2000));
shop.show();

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

Answer 2

以下是您的代码中的错误。

1. 您在getData() { return this.getTotalRecords().pipe( concatMap(data => this.http.get(...)), share(), ); } 内部的for循环不正确。条件buttAdd.addEventListener将迭代4次，而输入字段仅为3。

2. <=3是错误的，因为shop.addProduct(inputsAdd[i].value);类的addProduct方法需要shop类对象，因此您需要创建新的Product对象并设置通过Product class输入的值。

这是正确的方法：

constructor

这是正在运行的代码段

shop.addProduct(new Product(inputsAdd[0].value,inputsAdd[1].value,inputsAdd[2].value));

//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(products) {
        this.products = [];
    }

    //method for adding a product
    addProduct(newProduct) {
        this.products.push(newProduct);
    }

    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 += `<tr class="data"><td>${this.products[i].name}</td>
    <td>${this.products[i].price}</td>
    <td>${this.products[i].count}</td></tr>`;
        }
    }
}
   

     const formAdd = document.forms[0];
    
        const inputsAdd = formAdd.elements;
      
        const buttAdd = formAdd.elements[3];
    
        //console.log(buttAdd);
      
        buttAdd.addEventListener('click', (e) => {
    e.preventDefault();
    shop.addProduct(new Product(inputsAdd[0].value,parseInt(inputsAdd[1].value),inputsAdd[2].value));
            shop.show();
  
}, false);
        let shop = new Shop();
        shop.addProduct(new Product("product 1", 1, 2000));
        shop.show();