Cannot read property 'length' of null at getSum

[master-PC]

I am going to calculate total sales from a dynamically created table with JavaScript. I have two tables. Data from an Excel file are parsed into the first table. The second table has some data rows copied from the first table. There is a checkbox column in the first table that copies selected rows into the second table.

This is the function that creates the tale dynamically with JS.

<script type="text/javascript">
    $("body").on("click", "#upload", function () {
        //Reference the FileUpload element.
        var fileUpload = $("#fileUpload")[0];

       
        var reader = new FileReader();

        //For Browsers other than IE.
        if (reader.readAsBinaryString) {
                reader.onload = function (e) {
                        ProcessExcel(e.target.result);
                    };
             reader.readAsBinaryString(fileUpload.files[0]);
             } else {
                    //For IE Browser.
                    reader.onload = function (e) {
                        var data = "";
                        var bytes = new Uint8Array(e.target.result);
                        for (var i = 0; i < bytes.byteLength; i++) {
                            data += String.fromCharCode(bytes[i]);
                        }
                        ProcessExcel(data);
                    };
                    reader.readAsArrayBuffer(fileUpload.files[0]);
                }
            
    });
    function ProcessExcel(data) {
        var dvExcel = $("#dvExcel");
        //Clear the table.
        $("#dvExcel tr").remove(); 
        //Read the Excel File data.
        var workbook = XLSX.read(data, {
            type: 'binary'
        });

        //Fetch the name of First Sheet.
        var firstSheet = workbook.SheetNames[0];

        //Read all rows from First Sheet into an JSON array.
        var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);

        //Create a HTML Table element.
        var table = $("<table />");
        table[0].border = "1";

        //Add the header row.
        var row = $(table[0].insertRow(-1));

        //Add the header cells.                                     

        var headerCell = $("<th />");
        headerCell.html("Product Name");
        row.append(headerCell);

        var headerCell = $("<th />");
        headerCell.html("Sales");
        row.append(headerCell);

        //Add the data rows from Excel file.
        for (var i = 0; i < excelRows.length; i++) {
            //Add the data row.
            var row = $(table[0].insertRow(-1));

            //Add the data cells.
            var cell = $("<td />");
            cell.html(excelRows[i].ProductName);
            row.append(cell);

            cell = $("<td />");
            cell.html(excelRows[i].Sales);
            row.append(cell);


            cell = $("<td />");
            var selectedCB=document.createElement('input');
            selectedCB.type="checkbox";
            selectedCB.id = "chk" ;
            selectedCB.name = "chk" ; 
            cell.html(selectedCB);
            row.append(cell);
        }

        
        dvExcel.html("");
        dvExcel.append(table);
    };

The headers for the second table are here, written in HTML:

    <div id="endingHeader">
        <div>
            <h2>Selected Rows</h2>
        </div>
        <div>
            <table class="secondTable">
                <tr>
                    <th>Product name</th>
                    <th>Daily Sales</th>
                </tr>
                
            </table>
        </div>
    </div>

Here is the copy table function:

// Copying Function

$(function() {
        
        $(document).on("click",".transferrows", function() {
            $("#secondTable tr").remove(); 
            var getselectedValues=$("#dvExcel input:checked").parents("tr").clone().appendTo(".secondTable tbody").add(getselectedValues)
        })
    })

I have a button that would select a specific column, and then calculate the sum of the total sales in the selected column, which is column 2.

HTML code:

    <div>
         <button class="sum" onclick="getSum()">Get Sum</button>
    </div>

Here is the JS code I have so far:

//This function takes the data from the first column and then calcualtes the sum.
function getSum()
{
    var table=document.getElementById("secondTable"), sumVal=0;
    for(var i=1;i<table.length;i++)             //<--- The offending line here
    {
        sumVal=sumVal+parseInt(table.rows[i].cells[1].innerHTML);
    }
    console.log(sumVal);
}

That was where I hit a problem. It's called:

main.html:306 Uncaught TypeError: Cannot read property 'length' of null at getSum

What is wrong with my code? How can I Fix this?