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

Posted 2023-03-11

【中文标题】为啥将项目添加到空白数组中会重复显示项目？

【英文标题】：Why does adding items into a blank array display the items repeatedly?为什么将项目添加到空白数组中会重复显示项目？

【发布时间】：2021-11-30 08:59:01

【问题描述】：

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

这是我的代码：

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>

【问题讨论】：

请检查您的代码 sn-p。您需要创建工作示例

【参考方案1】：

对于第一次输入，表格很好，因为您每次都在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>

【讨论】：

非常感谢。效果很好。