output returns as [object, Object]

Question

I'm writing a code that take user input and stores it in an object array. However it doesn't seem to work the way I want it to. whenever I try to print out the array it just says [object, Object]. Thanks in advance!

 let addedProducts = []; let output = document.getElementById("output"); let productName = document.getElementById("product-name").value; let productAmount = document.getElementById("amount-stored").value; const addProduct = () => { product = { name: productName, amount: productAmount } addedProducts.push(product.name); addedProducts.push(product.amount); document.forms[0].reset(); } const showProducts = () => { output.innerHTML = addedProducts; }

 <form> <label>ProductName</label> <input id="product-name" type="text"><br> <label>amount in store</label> <input id="amount-stored" type="text"><br> <input type="button" value="add product in array" onclick="addProduct()"> <input type="button" value="show products in array" onclick="showProducts()"> </form> <p id="output"></p>

Answer 1

Make sure you read values within addProduct :

const addProduct = () => {
  let productName = document.getElementById("product-name").value;
  let productAmount = document.getElementById("amount-stored").value;
  product = {
    name: productName,
    amount: productAmount
  }
  addedProducts.push(product);;
  document.forms[0].reset();
}

const showProducts = () => {
  output.innerHTML = JSON.stringify(addedProducts, null, '\t');
}

 let addedProducts = []; let output = document.getElementById("output"); const addProduct = () => { let productName = document.getElementById("product-name").value; let productAmount = document.getElementById("amount-stored").value; product = { name: productName, amount: productAmount } addedProducts.push(product);; document.forms[0].reset(); } const showProducts = () => { output.innerHTML = JSON.stringify(addedProducts, null, '\t'); }

 <form> <label>ProductName</label> <input id="product-name" type="text"><br> <label>amount in store</label> <input id="amount-stored" type="text"><br> <input type="button" value="add product in array" onclick="addProduct()"> <input type="button" value="show products in array" onclick="showProducts()"> </form> <p id="output"></p>

Answer 2

The productName and productAmount are defined when your code is loaded, so they default to "" .

When you click the buttons, the values have not been updated so you just add empty strings to addedProducts .

Try the following:

let addedProducts = [];
let output = document.getElementById("output");

const addProduct = () => {
  let productName = document.getElementById("product-name").value;
  let productAmount = document.getElementById("amount-stored").value;
  product = {
    name: productName,
    amount: productAmount
  }
  addedProducts.push(product.name);
  addedProducts.push(product.amount);
  document.forms[0].reset();
}

const showProducts = () => {
  output.innerHTML = addedProducts;
}

Answer 3

you have to print every element like:

const showProducts = () => {
        foreach(addedProducts as addedproduct)
            output.innerHTML =  output.innerHTML + addedproduct;
    }

either:

you have to write your code on event callback like onChange() method.