What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Cannot read property 'length' of null at getSum

master-pc

New member
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.

JavaScript:
<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);
    };[/I][/I][/I]

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

HTML:
[I][I][I]<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>[/I][/I][/I]

Here is the copy table function:

JavaScript:
[I][I][I]// 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][/I][/I]


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:
[I][I][I]<div>
<button class="sum" onclick="getSum()">Get Sum</button>
</div>[/I][/I][/I]

Here is the JS code I have so far:

JavaScript:
[I][I][I]//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);
}[/I][/I][/I][/I]

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