Quiero obtener valores de entrada de todos los campos de entrada usando forEach y quiero devolver un objeto y enviarlo a la tabla para mostrarlo. Por favor ayuda.
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 Este es el código javascript que he escrito. No entiendo cómo agregar 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>`; });Su primer problema es su campo de datos de asignación dos veces. Entonces, cuando configuras el HTML interno del campo de datos, en realidad estás llamando a eso en la variable que está definida dentro del detector de eventos que no es la variable que contiene el elemento DOM.
Probar:
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(''); });Encontré el camino. Verifique el código actualizado a continuación.
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>GUION
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 = ""; }); });