I have a problem with this loop. I want to sum up the values from the table, but i have NaN value from this code. Should i change something or is there any other solution to sum up?
function sumUpWallet() {
var walletTable = document.getElementById("usersCrypto");
let sumVal = 0;
for (var i = 1; i < (walletTable.rows.length - 2); i++) {
const tableData = walletTable.rows[i].cells[3];
if (tableData && tableData.textContent) {
const value = parseFloat(tableData.textContent);
if (!isNaN(value)) {
sumVal = sumVal + value;
};
};
}
console.log(sumVal);
document.getElementById("sumDol").innerHTML = sumVal.toFixed(2);
};
Table is dynamic, after click the button another row is added. For example it can looks like this:


Problem is when you do:
console.log(walletTable.rows[i].cells[3]);
you get the follow result back <td>19271.71</td> instead of the figure 19271.71 for the first result of i
To fix this do add .textContent to the parseFloat like below
sumVal = sumVal + parseFloat(walletTable.rows[i].cells[3].textContent);
Added:
It looks like you are accessing data outside the range of the table. You need to do some validation to ensure what you are reading is valid before adding it to sumVal.
const tableData = walletTable.rows[i].cells[3];
if (tableData && tableData.textContent) {
const value = parseFloat(tableData.textContent);
if (!isNaN(value)) {
sumVal = sumVal + value;
}
}
Added an example that proves the above code works.
function sumUpWallet() {
var walletTable = document.getElementById("usersCrypto");
let sumVal = 0;
for (var i = 1; i < (walletTable.rows.length - 2); i++) {
const tableData = walletTable.rows[i].cells[3];
if (tableData && tableData.textContent) {
const value = parseFloat(tableData.textContent);
if (!isNaN(value)) {
sumVal = sumVal + value;
};
};
}
console.log(sumVal);
document.getElementById("sumDol").innerHTML = sumVal.toFixed(2);
};
sumUpWallet();
<table id="usersCrypto" border="1">
<tr>
<td>
Name
</td>
<td>
price
</td>
<td>
Amount
</td>
<td>
Header
</td>
<tr>
<tr>
<td>
Bitcoin
</td>
<td>
19271.71
</td>
<td>
1
</td>
<td>
19271.71
</td>
<tr>
<tr>
<td>
Ethereum
</td>
<td>
1070.11
</td>
<td>
2
</td>
<td>
2140.23
</td>
<tr>
<tr>
<td colspan="2">
</td>
<td>
PLN
</td>
<td>
DOL$
</td>
<tr>
<tr>
<td colspan="2">
Summary Value
</td>
<td>
</td>
<td id="sumDol">
</td>
<tr>
</table>