output 返回 [object, Object]

Question

我正在編寫一個接受用戶輸入並將其存儲在 object 數組中的代碼。 但是，它似乎並沒有按照我想要的方式工作。 每當我嘗試打印出數組時，它只會顯示 [object, Object]。 提前致謝！

 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

確保您在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

productName和productAmount是在加載代碼時定義的，因此它們默認為"" 。

當您單擊按鈕時，值尚未更新，因此您只需將空字符串添加到addedProducts 。

嘗試以下操作：

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

您必須打印每個元素，例如：

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

任何一個：

您必須在事件回調上編寫代碼，例如onChange()方法。