问题描述
当我将新商品添加到购物清单时，然后更改新商品表中的数字值时。在我的代码中使用一些console.logs之后，它将给出NaN（不是数字）。我发现如果我登录eentjeMeer函数（单击数字值时调用的函数）
除已添加的新商品外，所有产品[i]都已定义。
但是输入[i] .value也都已定义，加上新添加的项。因此无法进行计算。如您所见，这将导致总数列为NaN。
为什么它变得不确定？为什么看不到它？为什么会得到NaN？
为澄清起见，aantal =数量和prijs =值，我希望它计算总数。当我添加新项目时，它可以正确执行哪些操作。但是当我想更改表中新项目的值时不会。
（它适用于数组中的原始项目）
此处的代码段：
const myTable = document.getElementById('table')
let products = [
{ omschrijving: "Brood",waarde: 1,aantal:3,total: 0},{ omschrijving: "Brocolli",waarde: 0.99,aantal: 2,{ omschrijving: "Krentenbollen",waarde: 1.20,aantal: 4,{ omschrijving: "Noten",waarde: 2.99,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>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）