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

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. 在buttAdd.addEventListener内部的for循环不正确。条件<=3将迭代4次，而输入字段仅为3个。

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

这是正确的方法：

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(); 

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