Add items in a blank array and display the items-CodePudding

I want to take input value from the user then push that data to an array. Now the problem is when I am trying to create a new element for each object. For the first input, the table is all good but when I am trying to input for the second time the loop is printing the second object with the first object. I want to display it as index wise

Here is my code:

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;
}
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;
}
const addMore = document.getElementById("pAdd");
const tForm = document.getElementById("t");
let table = document.getElementById("table")

//don't delete comments for now .. I might need it later.

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;
}
const addMore = document.getElementById("pAdd");
const tForm = document.getElementById("t");
let table = document.getElementById("table")

//don't delete comments for now .. I might need it later.

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

<input id="pName" name="pName" type="text" placeholder="Products name">
<input id="productId" name="productId" type="text" placeholder="Product id">
<input id="pPrice" oninput=a ddNumber() name="pPrice" type="text" placeholder="Selling price">
<input id="qty" oninput=a ddNumber() 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=a ddNumber() name="disc" type="text" placeholder="Discount:">
<input id="amount" oninput=a ddNumber() 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></button>

CodePudding user response：

For first input the table was all good because you were appending the same order every time within the forEach. In order to solve it, put it outside so that the next times it will print the current object typed. Also, you have to do configure a way to avoid the submition of empty forms.

Note that I needed to adapt your HTML creating a <form> and a <table>. Plus, commented some lines.

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>