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

Issue

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

Solution

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 = "";
    });
  });

Answered By - user16511963

Answer Checked By - Clifford M. (PHPFixing Volunteer)