如何在生成的数字输入字段中获取数组属性值

Question

CODEPEN：https://codepen.io/3lly/pen/LYNzJwP

我有一个对象数组：

   let product =  [
    {omschrijving:"Brood", waarde:1, aantal:3, total:0},
    {omschrijving:"Brocolli", waarde:0.99, aantal:2, total:0},
    {omschrijving:"Krentenbollen", waarde:1.20, aantal:4, total:0},
    {omschrijving:"Noten", waarde:2.99, aantal:2, total:0}
    ]

然后生成一个表，在其中添加了一个带有数字输入字段的额外列。我想在数字输入字段的值中设置aantal的属性。

有了这些循环（由于范围问题，我再次进行了循环？）我仅在所有字段中都得到了最后一个值。所以他们都填写2。

   var elements = table.getElementsByTagName('input');
            for(let j=0;j<elements.length;j++) {
                for(let i=0;i<product.length;i++) {                                       
                   let = elements[j].value = product[i].aantal;     
            }    
        }

期望的输出在第一个输入字段中，它将是3，下一个是2,4,2

我也将代码段放在此处，以便您查看结果。（我现在知道这是一团糟）

UPDATE，我终于得到了它，花了我几个小时，我什至没有真正地完全理解。但是我给了rowID和行的生成并将其与之比较。我尝试了很多事情。我在这段代码上有很多工作要做。现在使其递增等。

现在我的问题是我无法增加和更新product.aantal的值，因此它可以计算总数。如果我可以解决这个问题，那么我可以修复其余的问题。

它在EentjeMeer函数的循环中以某种方式看不到product.value。 因为该循环在我想做同样的循环之前就起作用了，但是现在当然只需增加“ aantal”列即可。我的头很痛：//今天已经受了好几个小时了。

我添加了此内容，但我将更新我的代码段：

var elements = table.getElementsByTagName('input'); 
    schaap = [];
            for(let j=0;j<elements.length;j++) {
                inputID++;
                //console.log("de input ID" + inputID);
                //product.push({input: elements[j]});
             
                //console.log(schaap);
                for(let i=0;i<product.length;i++) {  
                    if ( rowID != inputID) {
                        rowID++

                        //schaap.push({aantal: product[i].aantal});
                        console.log( "inputID  " + inputID + "  en de ROW ID  " + rowID);
                        //console.log(schaap);
                        //index = product.findIndex(x => x.aantal[i] === elements[i]);
                  

                        if (rowID = product[i].aantal) { 


                            //index = product.findIndex(x => x.aantal === elements.input);
                            elements[i].value = product[i].aantal; 
                            //console.log("index" + index);
                        }

                    }
            }
        
        }

这就是我添加的内容。下面是我最初的问题的代码：

    
let myTable = document.querySelector('#table');
let rowID = 0;
let inputID = 0;
//Array met objecten erin {} staat voor een object
    let product =  [
    {omschrijving:"Brood", waarde:1, aantal:3, total:0},
    {omschrijving:"Brocolli", waarde:0.99, aantal:2, total:0},
    {omschrijving:"Krentenbollen", waarde:1.20, aantal:4, total:0},
    {omschrijving:"Noten", waarde:2.99, aantal:2, total:0}
    ]
///Update totals
    for(let i=0;i<product.length;i++)
{
  product[i].total = product[i].waarde*product[i].aantal;
    
}

const total = product.reduce((currentTotal, productCal) => {
    return productCal.total + currentTotal
}, 0)
uitslag = total.toFixed(2);
document.getElementById('totaal').innerHTML = "Totaal bedrag  " + uitslag;
////Table
    let headers = ['Name', 'Prijs', 'Aantal', 'Totaal', 'Aanpassen'];

    
        let table = document.createElement('table');
        let headerRow = document.createElement('tr');
     
        headers.forEach(headerText => {
            let header = document.createElement('th');
            let textNode = document.createTextNode(headerText);
            header.appendChild(textNode);
            headerRow.appendChild(header);
        });
     
        table.appendChild(headerRow);

///////////td is column

    product.forEach(emp => {
        let row = document.createElement('tr');
        Object.values(emp).forEach(text => {
        
            //console.log("row" + rowID);
            let cell = document.createElement('td');
            let textNode = document.createTextNode(text);

            
            cell.appendChild(textNode);
            row.appendChild(cell);
        })
        input = document.createElement('input');
        cell = document.createElement('td');
        input.type = 'number';
        //input.value
        input.addEventListener('click', eentjeMeer() );      
        cell.appendChild(input);
        row.appendChild(cell);
/*
        let input = document.createElement('input');
        input.type = "step";
        table.appendChild(input);
*/
        table.appendChild(row);
    });
  
        myTable.appendChild(table);
     
/////////////////////
/////////////////INPUTS AANPASSEN MET WAARDE VAN ARRAY////////////////////////////

var elements = table.getElementsByTagName('input'); //misschien mot ik het in een array droppen
            for(let j=0;j<elements.length;j++) {
                inputID++;
                //console.log("de input ID" + inputID);
                //product.push({input: elements[j]});
             
                //console.log(schaap);
                for(let i=0;i<product.length;i++) {  
                    if ( rowID != inputID) {
                        rowID++

                        //schaap.push({aantal: product[i].aantal});
                        console.log( "inputID  " + inputID + "  en de ROW ID  " + rowID);
                        //console.log(schaap);
                        //index = product.findIndex(x => x.aantal[i] === elements[i]);
                  

                        if (rowID = product[i].aantal) { //hier GAAT IETS GOED ALS laatst op 22:22 HIJ DOET DE LAATSTE NIET WHY???


                            //index = product.findIndex(x => x.aantal === elements.input);
                            elements[i].value = product[i].aantal; 
                            //console.log("index" + index);
                        }
                              
                  

                    }

            }
        
        }

        //product[i].total = product[i].waarde*product[i].aantal;
///////////////////////////////////////////////////

for(let j=0;j<product.length;j++) {
    //let row = document.createElement('tr');
}

function updateTable() {
            test = [];
        
            b1 = document.getElementById('naam').value;
            b2 = document.getElementById('prijs').value;
            b3 = document.getElementById('qty').value;
        
        test.push({omschrijving:b1, waarde:b2, aantal:b3, total:0});

        for(let i=0;i<test.length;i++)
        {
        test[i].total = test[i].waarde*test[i].aantal;
        }

        test.forEach(emp => {
            let row = document.createElement('tr');

            Object.values(emp).forEach(text => {
                let cell = document.createElement('td');
                let textNode = document.createTextNode(text);
                cell.appendChild(textNode);
                row.appendChild(cell);
            })

            table.appendChild(row);
         
        });

            myTable.appendChild(table);

            //console.log(product);

/////////////////////////totaal na update WORDT AFGEROND DOOR PARSEINT?!?!?!
            const total0 = test.reduce((currentTotal, productCal) => {
                return productCal.total + currentTotal
            }, 0)
            
            console.log("total0 =  " + total0);
            yo = total0.toFixed(2);
            yo1 = Number.parseInt(yo) + Number.parseInt(uitslag);
            document.getElementById('totaal').innerHTML = "Totaal bedrag  " + yo1;
            console.log(yo);
        }
    
        function eentjeMeer(){

                
    var elements = table.getElementsByTagName('input'); //misschien mot ik het in een array droppen
    for(let j=0;j<elements.length;j++) {
        inputID++;
        //console.log("de input ID" + inputID);
        //product.push({input: elements[j]});
    
        //console.log(schaap);
        for(let i=0;i<product.length;i++) {  
            if ( rowID != inputID) {
                rowID++

                //schaap.push({aantal: product[i].aantal});

                //console.log(schaap);
                //index = product.findIndex(x => x.aantal[i] === elements[i]);
        

                if (rowID = product[i].aantal)  { 
                    console.log(product[i].aantal); //het doet het wel nu....iets met inputID denk ik



                    objIndex = product.findIndex((obj => obj.aantal == rowID));
                    //product[i].aantal.name = elements[i].value;

                    testje = product[i].aantal;

                    //elements[i].value = inputID;
                    //inputID = product[i].aantal;
                    //product[i].aantal = elements[i].value; 
                    //console.log(elements[i].value);
                    //console.log(product);
                    //console.log("index" + index);
                }
                    
        

            }

    }

    }       
        };

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="script.js"></script>
</body>
</html>