How to append input values to a html table using forEach method in JavaScript?

Question

I want to get input values from all the input fields using forEach and want to return an object and send to the table to display. Please help.

HTML

<form>
      <input name="date" value="date" type="date" placeholder="date" />
      <input name="item" value="item" type="text" placeholder="item name" />
      <input name="qty" value="qty" type="text" placeholder="quantity" />
      <input name="amt" value="amt" type="text" placeholder="price" />
      <button type="submit">submit</button>
    </form>

    <div class="container">
      <table>
        <tr>
          <th width="10%">Sr.No.</th>
          <th width="10%">Date</th>
          <th width="60%">Name</th>
          <th width="10%">Quantity</th>
          <th width="10%">Price</th>
        </tr>
        <tr class="datafield">
          <!-- <td>1</td>
          <td>1.1.2022</td>
          <td>pencil</td>
          <td>5</td>
          <td>45</td> -->
        </tr>
        <tr>
          <td colspan="4" align="right"><b>TOTAL</b></td>
          <td>0.00</td>
        </tr>
      </table>
    </div>

SCRIPT This is the javascript code I have written. I don't understand how to append html.

const inputs = [...document.querySelectorAll("input")];
      const button = document.querySelector("button");
      const datafield = document.querySelector(".datafield");

      button.addEventListener("click", (e) => {
        e.preventDefault();
        let datafield = {};
        let x = [];
        inputs.forEach((input, index) => {
          x.push(input.value);
        });
        datafield.innerHTML = `<td>1</td>
          <td>1.1.2022</td>
          <td>pencil</td>
          <td>5</td>
          <td>45</td>`;
      });

Answer 1

I found the way. Check the updated code below.

HTML

<form>
      <input name="sr.no" value="1" type="number" placeholder="sr.no" />
      <input name="date" value="date" type="date" placeholder="date" />
      <input name="item" value="item" type="text" placeholder="item name" />
      <input name="qty" value="qty" type="text" placeholder="quantity" />
      <input name="amt" value="amt" type="text" placeholder="price" />
      <button type="submit">submit</button>
    </form>

    <div class="container">
      <table>
        <tr>
          <th width="10%">Sr.No.</th>
          <th width="10%">Date</th>
          <th width="60%">Name</th>
          <th width="10%">Quantity</th>
          <th width="10%">Price</th>
        </tr>
        <tr class="datafield"></tr>
        <tr>
          <td colspan="4" align="right"><b>TOTAL</b></td>
          <td>0.00</td>
        </tr>
      </table>
    </div>

SCRIPT

const button = document.querySelector("button");
  const inputs = [...document.querySelectorAll("input")];
  const datafield = document.querySelector(".datafield");

  button.addEventListener("click", (e) => {
    e.preventDefault();
    const tr = document.createElement("tr");
    inputs.forEach((input, index) => {
      const td = document.createElement("td");
      tr.appendChild(td);
      const values = document.createTextNode(input.value);
      td.appendChild(values);
      console.log(td);
      datafield.insertAdjacentElement("beforebegin", tr);
      input.value = "";
    });
  });

Answer 2

Your first issue is your assigning data field twice. So when you set innerHTML of datafield your actually calling that on the variable that's defined inside the event listener which isn't the variable that contains the DOM element.

Try:

const inputs = [...document.querySelectorAll('input')];
const button = document.querySelector('button');
const datafield = document.querySelector('.datafield');

button.addEventListener('click', (e) => {
  e.preventDefault();
  let x = [];
  inputs.forEach((input, index) => {
    x.push(input.value);
  });

  datafield.innerHTML += x.map((item) => `<td>${item}</td>`).join('');
});