Cannot read property 'length' of null at getSum

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.

HTML Code:

---

<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:

HTML Code:

---

    <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:

Code:

---

// 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:

HTML Code:

---

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

---

Here is the JS code I have so far:

Code:

---

//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?

Have you tried stepping through the code in the browser's debugger? You should then be able to see the exact variable that is null and figure out why it is null.