CODEWITHSUNDEEP
javascripthtml
KidRonee
KidRonee

Reputation: 19

output returns as [object, Object]

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>

Upvotes: 0

Views: 79

Answers (3)

Aadil Mehraj
Aadil Mehraj

Reputation: 2614

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>

Upvotes: 2

ley
ley

Reputation: 1

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.

Upvotes: 0

anpel
anpel

Reputation: 941

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

Upvotes: 1

Related Questions