How to get specific user input data from a dynamic HTML table (Onchange function, number values)

Question

I am trying to get the values from the input fields from my dynamic table. This so it calculates the total of each row correctly when the user changes the values in the number input field.

So far I got the data out, but from all the input fields. I only need the ones from the table.

I have tried some conditional statements, because I only need the input fields that have the editable option that are in objects array of products. (Editable is a value, this for the generating of the input fields)

How do I get this data properly so I can multiply it with the price (my Dutch language PRIJS Column)

I thought it would be simple since I am almost finished with this project. But I am stuck :s

I proved a Code Pen here: https://codepen.io/3lly/pen/YzqYEOY

The array is Products

The number onchange function I am working on is Function EentjeMeer() down below the JS file. To see of course the console logs, first click a number :) The output now when I click up on the first is :

["4", "2", "4", "2", "", "", "", "Add Product"]

I only need the first 4, the rest is not the table but the user input fields (and then I hope I can easily update the products array with these values)

 let myTable = document.querySelector('#table'); let rowID = 0; let inputID = 0; //Array met objecten erin {} staat voor een object let products = [ { omschrijving: { value: "Brood" }, waarde: { value: 1 }, aantal: { value: 3, editable: true }, total: { value: 0 } }, { omschrijving: { value: "Brocolli" }, waarde: { value: 0.99 }, aantal: { value: 2, editable: true }, total: { value: 0 } }, { omschrijving: { value: "Krentenbollen" }, waarde: { value: 1.20 }, aantal: { value: 4, editable: true }, total: { value: 0 } }, { omschrijving: { value: "Noten" }, waarde: { value: 2.99 }, aantal: { value: 2, editable: true }, total: { value: 0 } } ] ///Update totals in tabel for (let i = 0; i < products.length; i++) { products[i].total.value = products[i].waarde.value * products[i].aantal.value; } //Totaal alle producten const total = products.reduce((currentTotal, productCal) => { return productCal.total.value + currentTotal }, 0) const uitslag = total.toFixed(2); document.getElementById('totaal').innerHTML = "Totaal bedrag " + uitslag; ////Table ///////////td is column //Table Headers let headerTexts = ['Name', 'Prijs', 'Aantal', 'Totaal']; let table = document.createElement('table'); let headerRow = document.createElement('tr'); headerTexts.forEach(headerText => { let header = document.createElement('th'); let textNode = document.createTextNode(headerText); header.appendChild(textNode); headerRow.appendChild(header); }); table.appendChild(headerRow); products.forEach(product => { let row = document.createElement('tr'); row.className = product.omschrijving.value; Object.values(product).forEach(entry => { //console.log("row" + rowID); let cell = document.createElement('td'); let cellInput = document.createElement("input"); cellInput.type = "number" cellInput.defaultValue = entry.value; //Hier haalt hij de values uit.************** cellInput.addEventListener("change", function (ev) { //ik snap de (ev) niet die ev kan ik ook weghalen. console.log("Input clicked") eentjeMeer(); }); let textNode = document.createTextNode(entry.value); cell.appendChild(entry.editable ? cellInput : textNode); //variablename = (condition) ? value1:value2 // Append child CellInput-Number if the entry is editable cell.className = entry.editable ? "editable" : ""; row.appendChild(cell); }) table.appendChild(row); }); console.log("entries" + Object.entries(products)); myTable.appendChild(table); for (let j = 0; j < products.length; j++) { //let row = document.createElement('tr'); } function getNewInput() { const naamValue = document.getElementById('naam').value; const waardeValue = document.getElementById('prijs').value; const qtyValue = document.getElementById('qty').value; return { omschrijving: { value: naamValue }, waarde: { value: waardeValue }, aantal: { value: qtyValue, editable: true }, total: { value: waardeValue * qtyValue } } } const test = []; //naar boven plakken straks function updateTable() { const newInput = getNewInput(); //Verwijst naar GET NEW INPUT en pushed de info van die functie naar de test array die UIT HTML word gehaald. test.push(newInput); //zie boven test.forEach(emp => { let row = document.createElement('tr'); Object.values(emp).forEach(empValue => { let cell = document.createElement('td'); let cellInput = document.createElement("input"); cellInput.type = "number" cellInput.defaultValue = empValue.value; cellInput.addEventListener("change", function (ev) { console.log("Input clicked") eentjeMeer(); //CALLBACK }); let textNode = document.createTextNode(empValue.value); cell.appendChild(empValue.editable ? cellInput : textNode); //if statements kunnen dus ook zo hier voor appenden cell.className = empValue.editable ? "editable" : ""; row.appendChild(cell); }) table.appendChild(row); }); myTable.appendChild(table); //update totaal bedrag const total0 = test.reduce((currentTotal, productCal) => { return productCal.total.value + currentTotal }, 0) const yo = total0.toFixed(2); const TotalTable = Number.parseInt(yo) + Number.parseInt(uitslag); document.getElementById('totaal').innerHTML = "Totaal bedrag " + TotalTable; } function eentjeMeer() { Object.values(products).forEach(entry => { if (entry.editable = true) //console.log(entry.editable.value); var inputs = document.getElementsByTagName("input"); var result = new Array(inputs.length); for (var i=0; i<inputs.length; i++) if (entry.editable == true) result[i] = inputs[i].value; console.log(result); }); /* for (let i = 0; i < products.length; i++) { aantal = products[i].aantal.value; waarde = products[i].waarde.value; console.log(aantal * waarde); } */ }

 body { text-align: center; } div { display: inline-block; } button { display: inline-block; padding: 10px 20px; } #table { display: block; margin-top: 20px; } th, td { border: 1px solid black; padding: 5px; } #totaal { border: 2px solid black; background-color: skyblue; padding: 5px; }

 <!DOCTYPE html> <head> <link rel="stylesheet" href="style.css"> <title>Boodschappenlijst</title> </head> <body> <h1> Boodschappenlijst </h1> <div id="container"></div> <div> <div id="table"></div> </div> <p>Naam</p> <input type="text" name="item" id="naam" /><br /> <p>Aantal</p> <input type="text" name="quantity" id="qty" /><br /> <p>Prijs</p> <input type="text" name="price" id="prijs" /><br/><br /> <input type="button" value="Add Product" onclick="updateTable()" id="add"><br /><br /> <div id="totaal"></div> <script src="demo.js"></script> </body> </html>

Answer 1

It was of course very simple, now to get it to calculate the totals. But here is the answer to my own question:

    Object.values(products).forEach(entry => {
var inputs = myTable.getElementsByTagName("input");
var result = new Array(inputs.length);
for (var i=0; i<inputs.length; i++)
    //products[i].total.value = products[i].waarde.value * products[i].aantal.value; 
    result[i] = inputs[i].value;    
    console.log(result);  
    });

So I used for the inputs variable myTable which refers to the table ID in the HTML. Instead of my Documents. Also I could have given it a classname Dynamically which I did not think about before.

Next step is to calculate the totals, which should be easy but of course I get an error :) Wish me luck. (Also why do people never reply to me, what am I doing wrong?)