Question

0

183

Views

Why i have "Nan" value from the loop which is summing up the table column

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:

Screenshot page

Example table accesibility

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T00:37:23.169Z

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>

0

183

Why i have "Nan" value from the loop which is summing up the table column

1 answers

0

Find remote jobs

Andres GPT