How to transfer a value from inputs to array?

Question

I want to transfer the value from three inputs: "name", "counter" and "price" to the array "products" that I then display in the table. But when I add them using the buttAdd.addEventListener handler, the new elements are not displayed in the table Help fix this

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

NullPointer · Accepted Answer · 2018-07-08 17:17:32Z

Below are the errors in your code.

Your for loop inside buttAdd.addEventListener is not correct.condition <=3 will iterate 4 time while input fields are only 3.
shop.addProduct(inputsAdd[i].value); is wrong because addProduct method of shop class required Product class object so you need to create new Product class object and set the values of input through constructor.

This is the correct way:

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

Here is the running snippet

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

samizzy · Accepted Answer · 2018-07-08 17:00:30Z

Your addProduct() method takes in a Product object as input, but in click listener you are passing form field input values without forming a object

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

Collectives™ on Stack Overflow

How to transfer a value from inputs to array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related