为什么将项目添加到空白数组中会重复显示项目？

Question

我想从用户那里获取输入值，然后将该数据推送到一个数组中。现在的问题是当我试图为每个对象创建一个新元素时。对于第一个输入，table 一切正常，但是当我第二次尝试输入时，循环正在用第一个对象打印第二个对象。我想以索引方式显示它

这是我的代码：

const addMore = document.getElementById("pAdd");
const tForm = document.getElementById("t");
let table = document.getElementById("table")

let orders = []
addMore.addEventListener("click", function(e) {
  e.preventDefault()
  let order = {
    productName: document.getElementById("pName").value,
    productPrice: document.getElementById("pPrice").value,
    qty: document.getElementById("qty").value,
    total: document.getElementById("total").value,

  }
  // let orderObject= JSON.stringify(order)
  orders.push(order)
  tForm.reset();

  orders.forEach(allOrder => {
    let row = document.createElement("tr")
    Object.values(allOrder).forEach(text => {
      let cell = document.createElement("td")
      let texNode = document.createTextNode(text)
      cell.appendChild(texNode)
      row.appendChild(cell)
    })
    table.appendChild(row)
  })

  //let rightSdie = document.querySelector(".right")
  //rightSdie.appendChild(table)
})

function addNumber() {
  var x = document.getElementById("pPrice").value;
  var y = document.getElementById("qty").value;
  var z = document.getElementById("amount").value;
  var disc = document.getElementById("disc").value
  var discTotal = y * x * disc / 100;
  document.getElementById("total").value = (y * x) - z - discTotal;
}

<form id="t">
<input id="pName" name="pName" type="text" placeholder="Products name">
        <input id="productId" name="productId" type="text" placeholder="Product id">
        <input id="pPrice" oninput= addNumber() name="pPrice" type="text" placeholder="Selling price">
        <input id="qty"  oninput= addNumber() type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="qty " size="4" pattern="" inputmode="" placeholder="qty">
        <input id="disc" oninput= addNumber() name="disc" type="text" placeholder="Discount:">
        <input id="amount" oninput= addNumber() name="amount" type="text" placeholder="Amount:">
        <input id="stock" name="stock" type="text" placeholder="stock:">
        <input id="total" name="total" type="text" placeholder="Total: " readonly>
        <button type="button" id="pAdd" class="add"><i class="fas fa-plus-circle"></i>OK</button>
        </form>

<table id="table"></table>

Answer 1

对于第一次输入，table 一切正常，因为您每次都在 forEach 中附加相同的顺序。为了解决这个问题，把它放在外面，这样下次它就会打印当前输入的对象。此外，您必须配置一种方法来避免提交空表单。

请注意，我需要调整您的 HTML，创建一个 <form> 和一个 <table>。另外，评论了一些行。

const addMore = document.getElementById("pAdd");
const tForm = document.getElementById("t");
let table = document.getElementById("table")

let orders = []
addMore.addEventListener("click", function (e){
  e.preventDefault()
  let order = {
    productName: document.getElementById("pName").value,
    productPrice: document.getElementById("pPrice").value,
    qty: document.getElementById("qty").value,
    total: document.getElementById("total").value,
  }
  // let orderObject= JSON.stringify(order)
  orders.push(order)
  tForm.reset();
  
  let row; // this outsite forEach
  
  orders.forEach(allOrder => {
    row = document.createElement("tr")
    Object.values(allOrder).forEach(text => {
      let cell = document.createElement("td")
      let texNode = document.createTextNode(text)
      cell.appendChild(texNode)
      row.appendChild(cell)
    })
  })
  
  table.appendChild(row) // also this outside forEach
 
  //let rightSdie = document.querySelector(".right")
  //rightSdie.appendChild(table)
})


function addNumber() {
  var x = document.getElementById("pPrice").value;
  var y = document.getElementById("qty").value;
  var z = document.getElementById("amount").value;
  var disc = document.getElementById("disc").value
  var discTotal = y * x * disc / 100 ;
 document.getElementById("total").value = (y * x ) - z - discTotal;
}

<form id="t">
<input id="pName" name="pName" type="text" placeholder="Products name">
        <input id="productId" name="productId" type="text" placeholder="Product id">
        <input id="pPrice" oninput= addNumber() name="pPrice" type="text" placeholder="Selling price">
        <input id="qty"  oninput= addNumber() type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="qty " size="4" pattern="" inputmode="" placeholder="qty">
        <input id="disc" oninput= addNumber() name="disc" type="text" placeholder="Discount:">
        <input id="amount" oninput= addNumber() name="amount" type="text" placeholder="Amount:">
        <input id="stock" name="stock" type="text" placeholder="stock:">
        <input id="total" name="total" type="text" placeholder="Total: " readonly>
        <button type="button" id="pAdd" class="add"><i class="fas fa-plus-circle"></i>OK</button>
        </form>

<table id="table"></table>

为什么将项目添加到空白数组中会重复显示项目？

Why does adding items into a blank array display the items repeatedly?

javascript

arrays

foreach

input

createelement