javascript - 我无法更新动态表中的总数（它显示未定义新添加的输入）

Question

当我将新项目添加到我的购物清单时，然后如果我更改新项目表中的数字值。它会给出 NaN（不是数字）在通过我的代码使用一些 console.logs 之后，我发现如果我登录 eentjeMeer 函数（这是我单击数字值时调用的函数）

products[i].waarde 除了新添加的项目外，它们都已定义，它是未定义的。

但是 inputs[i].value 它们也都被定义加上新添加的项目。所以无法进行计算。然后它将导致总列为 NaN，如您所见。

为什么它变得未定义？为什么它看不到它？为什么会得到 NaN ？

为了澄清 aantal=Quantity 和 prijs=Value，我希望它计算总数。当我添加新项目时它会正确执行。但不是当我想更改表中新项目的值时。

（它适用于数组中的原始项目）

代码片段在这里：

const myTable = document.getElementById('table')
let products = [ 
    { 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 in tabel
TabelTotals();
function TabelTotals() {
for (let i = 0; i < products.length; i++) {
    products[i].total = products[i].waarde * products[i].aantal;  
}

}
Alles();
function Alles(){
//Totaal alle producten 
const total = products.reduce((currentTotal, productCal) => {
   return productCal.total + currentTotal
}, 0);
document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   total.toFixed(2); 
}
////Table /////Headers
const headerTexts = ['Name', 'Prijs', 'Aantal', 'Totaal'];
const t = document.createElement('table');
t.appendChild(document.createElement('thead'));
t.querySelector('thead').appendChild(document.createElement('tr'));

for (var i = 0; i < headerTexts.length; i++) {
    const heading = document.createElement('td');
    heading.textContent = headerTexts[i];
    t.querySelector('thead tr').appendChild(heading);
}
document.getElementById('table').appendChild(t);
//Rows
for (var i = 0; i < products.length; i++) {
    var s = products[i];
    var r = document.createElement('tr');

    r.dataset.productID = s.id; //ff beter kijken wat dit is, dit is wel cool.
    r.id = s.omschrijving + "--row"; 

    var omschrijvingCell = document.createElement('td');
    omschrijvingCell.textContent = s.omschrijving;
    omschrijvingCell.classList.add('omschrijving');
    omschrijvingCell.dataset.productID = s.id;

    var prijsCell = document.createElement('td');
    prijsCell.textContent = s.waarde;
    prijsCell.classList.add('prijs')
    prijsCell.dataset.productID = s.id;

    var aantalCell = document.createElement('input');
    aantalCell.type = "number"
    aantalCell.defaultValue = s.aantal; 
    aantalCell.addEventListener("change", eentjeMeer);
    aantalCell.classList.add('aantal')
    aantalCell.dataset.productID = s.id;

    var totaalCell = document.createElement('td');
    totaalCell.textContent = s.total;
    totaalCell.classList.add('total')
    totaalCell.dataset.productID = s.id;

    r.appendChild(omschrijvingCell);
    r.appendChild(prijsCell);
    r.appendChild(aantalCell);
    r.appendChild(totaalCell);

    t.appendChild(r);

}
/////Functions//////
function getNewInput() {
    const naamValue = document.getElementById('naam').value;
    const waardeValue = parseFloat(document.getElementById('prijs').value);
    const qtyValue = parseFloat(document.getElementById('qty').value);
    return [{ omschrijving: naamValue , waarde: waardeValue , aantal: qtyValue , total: waardeValue * qtyValue }]
}

function eentjeMeer() {
    const inputs = document.getElementsByClassName('aantal');
        uitKomst = myTable.getElementsByClassName("total");
        for (let i = 0; i < products.length; i++) {
            uitKomst[i].innerHTML = inputs[i].value * products[i].waarde; 
            console.log(products[i].waarde); 
            
        }  

     //Totaal alle producten 
const total = products.reduce((currentTotal, productCal) => {
    return productCal.total + currentTotal
 }, 0);
 document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   total.toFixed(2); 
    
}    

function updateTable() {
    const newInput = getNewInput(); 
    products.push(newInput); 
    for (var i = 0; i < newInput.length; i++) {
        var s = newInput[i];
        var r = document.createElement('tr');

        
    r.dataset.productID = s.id; //ff beter kijken wat dit is, dit is wel cool.
    r.id = s.omschrijving + "--row"; //ff checken hoe dat gaat --row geef dus IDS mee

    var omschrijvingCell = document.createElement('td');
    omschrijvingCell.textContent = s.omschrijving;
    omschrijvingCell.classList.add('omschrijving');
    omschrijvingCell.dataset.productID = s.id;

    var prijsCell = document.createElement('td');
    //prijsCell.type = "number"
    prijsCell.textContent = s.waarde;
    prijsCell.classList.add('prijs');
    prijsCell.dataset.productID = s.id;

    var aantalCell = document.createElement('input');
    aantalCell.type = "number"
    aantalCell.defaultValue = s.aantal; 
    aantalCell.addEventListener("change", eentjeMeer);
    aantalCell.classList.add('aantal');
    aantalCell.dataset.productID = s.id;

    var totaalCell = document.createElement('td');
    totaalCell.textContent = s.total;
    totaalCell.classList.add('total');
    totaalCell.dataset.productID = s.id;

    r.appendChild(omschrijvingCell);
    r.appendChild(prijsCell);
    r.appendChild(aantalCell);
    r.appendChild(totaalCell);

    t.appendChild(r);
   
    console.log(products[4]); // het word geen string zie ik hier.
        
        }
    };

function CalculateTot() {
    const total = products.reduce((currentTotal, productCal) => {
        return productCal.total + currentTotal
    }, 0);
    document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   total.toFixed(2);
    // allTotal.splice(0,1, total.toFixed(2));
    // document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   allTotal;
}

//Vraag , in for loops altijd var ?

body {
    text-align: center;
}
 
div {
    display: inline-block;
}
 
button {
    display: inline-block;
    padding: 10px 20px;
}
 
#table {
    display: block;
    margin-top: 20px;
}
 
th, td , input {
    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>

标签： javascripthtmlarraysundefinedcalculation

Answer 1

问题出在你的getNewInput()功能上。您返回一个数组，而您应该返回一个对象。改变这个：

return [{ omschrijving: naamValue , waarde: waardeValue , aantal: qtyValue , total: waardeValue * qtyValue }]

对此：

return { omschrijving: naamValue , waarde: waardeValue , aantal: qtyValue , total: waardeValue * qtyValue }

因此，updateTable()通过删除 for 循环来修改函数。

一切都会正常工作：

const myTable = document.getElementById('table')
let products = [ 
    { 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 in tabel
TabelTotals();
function TabelTotals() {
for (let i = 0; i < products.length; i++) {
    products[i].total = products[i].waarde * products[i].aantal;  
}

}
Alles();
function Alles(){
//Totaal alle producten 
const total = products.reduce((currentTotal, productCal) => {
   return productCal.total + currentTotal
}, 0);
document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   total.toFixed(2); 
}
////Table /////Headers
const headerTexts = ['Name', 'Prijs', 'Aantal', 'Totaal'];
const t = document.createElement('table');
t.appendChild(document.createElement('thead'));
t.querySelector('thead').appendChild(document.createElement('tr'));

for (var i = 0; i < headerTexts.length; i++) {
    const heading = document.createElement('td');
    heading.textContent = headerTexts[i];
    t.querySelector('thead tr').appendChild(heading);
}
document.getElementById('table').appendChild(t);
//Rows
for (var i = 0; i < products.length; i++) {
    var s = products[i];
    var r = document.createElement('tr');

    r.dataset.productID = s.id; //ff beter kijken wat dit is, dit is wel cool.
    r.id = s.omschrijving + "--row"; 

    var omschrijvingCell = document.createElement('td');
    omschrijvingCell.textContent = s.omschrijving;
    omschrijvingCell.classList.add('omschrijving');
    omschrijvingCell.dataset.productID = s.id;

    var prijsCell = document.createElement('td');
    prijsCell.textContent = s.waarde;
    prijsCell.classList.add('prijs')
    prijsCell.dataset.productID = s.id;

    var aantalCell = document.createElement('input');
    aantalCell.type = "number"
    aantalCell.defaultValue = s.aantal; 
    aantalCell.addEventListener("change", eentjeMeer);
    aantalCell.classList.add('aantal')
    aantalCell.dataset.productID = s.id;

    var totaalCell = document.createElement('td');
    totaalCell.textContent = s.total;
    totaalCell.classList.add('total')
    totaalCell.dataset.productID = s.id;

    r.appendChild(omschrijvingCell);
    r.appendChild(prijsCell);
    r.appendChild(aantalCell);
    r.appendChild(totaalCell);

    t.appendChild(r);

}
/////Functions//////
function getNewInput() {
    const naamValue = document.getElementById('naam').value;
    const waardeValue = parseFloat(document.getElementById('prijs').value);
    const qtyValue = parseFloat(document.getElementById('qty').value);
    return { omschrijving: naamValue , waarde: waardeValue , aantal: qtyValue , total: waardeValue * qtyValue }
}

function eentjeMeer() {
    const inputs = document.getElementsByClassName('aantal');
        uitKomst = myTable.getElementsByClassName("total");
        for (let i = 0; i < products.length; i++) {
            uitKomst[i].innerHTML = inputs[i].value * products[i].waarde; 
            console.log(products[i].waarde); 
            
        }  

     //Totaal alle producten 
const total = products.reduce((currentTotal, productCal) => {
    return productCal.total + currentTotal
 }, 0);
 document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   total.toFixed(2); 
    
}    

function updateTable() {
    const newInput = getNewInput(); 
    products.push(newInput);
    var s = newInput;
    var r = document.createElement('tr');

        
    r.dataset.productID = s.id; //ff beter kijken wat dit is, dit is wel cool.
    r.id = s.omschrijving + "--row"; //ff checken hoe dat gaat --row geef dus IDS mee

    var omschrijvingCell = document.createElement('td');
    omschrijvingCell.textContent = s.omschrijving;
    omschrijvingCell.classList.add('omschrijving');
    omschrijvingCell.dataset.productID = s.id;

    var prijsCell = document.createElement('td');
    //prijsCell.type = "number"
    prijsCell.textContent = s.waarde;
    prijsCell.classList.add('prijs');
    prijsCell.dataset.productID = s.id;

    var aantalCell = document.createElement('input');
    aantalCell.type = "number"
    aantalCell.defaultValue = s.aantal; 
    aantalCell.addEventListener("change", eentjeMeer);
    aantalCell.classList.add('aantal');
    aantalCell.dataset.productID = s.id;

    var totaalCell = document.createElement('td');
    totaalCell.textContent = s.total;
    totaalCell.classList.add('total');
    totaalCell.dataset.productID = s.id;

    r.appendChild(omschrijvingCell);
    r.appendChild(prijsCell);
    r.appendChild(aantalCell);
    r.appendChild(totaalCell);

    t.appendChild(r);
   
    console.log(products[4]); // het word geen string zie ik hier.
};

function CalculateTot() {
    const total = products.reduce((currentTotal, productCal) => {
        return productCal.total + currentTotal
    }, 0);
    document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   total.toFixed(2);
    // allTotal.splice(0,1, total.toFixed(2));
    // document.getElementById('totaal').innerHTML = "Totaal bedrag  " +   allTotal;
}

//Vraag , in for loops altijd var ?

body {
    text-align: center;
}
 
div {
    display: inline-block;
}
 
button {
    display: inline-block;
    padding: 10px 20px;
}
 
#table {
    display: block;
    margin-top: 20px;
}
 
th, td , input {
    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>