how do i make my calculate function also sum columns as well as rows of textboxes
<p>i am trying to create a page that has a two textboxes where the user can choose how many rows and columns they want. A grid is of textboxes is then created for their requirements, with an added column and row of disabled text boxes to calculate the sum of each row and column. The function sums all the rows but i am really struggling to sum the rows. Here is the code so far.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
        &lt;script&gt;
            function grid() {
            var row = document.getElementById("rows");
            var column = document.getElementById("columns");
            row.value = parseInt(row.value);
            column.value = parseInt(column.value);


                for (var x = 0; x &lt;= parseInt(row.value); x++) {

                    for (var y = 0; y &lt;= parseInt(column.value); y++){
                        var br = document.createElement("br");
                        var box = document.createElement("input")
                            box.setAttribute("type", "text");
                            box.setAttribute("size", "5");
                            box.setAttribute("id", "tb" + x + y);
                            box.setAttribute("name", "add" + x);
                            box.setAttribute("value", "0");
                            box.style.marginRight = "3px";
                            box.style.marginBottom = "3px";
                        var output = document.createElement("input");   
                            output.setAttribute("id", "output" + parseInt(x) + parseInt(y))
                            output.setAttribute("name", "result" + x);
                            output.setAttribute("disabled", "true");
                            output.setAttribute("size", "5");
                            output.style.marginRight = "3px";

                    if (x &lt; parseInt(row.value)){
                            if (y &lt; parseInt(column.value)){
                                document.getElementById("boxs").parentNode.appendChild(box);
                            }else{
                                document.getElementById("boxs").parentNode.appendChild(output);
                                document.getElementById("boxs").parentNode.appendChild(br);
                            }                   
                        }else{
                            document.getElementById("boxs").parentNode.appendChild(output);
                        }
                    }
                }
                //remove last box
                tbid = "output" + (row.value) + (column.value);
                nobox = document.getElementById(tbid);
                nobox.parentNode.removeChild(nobox);

            }
            &lt;/script&gt;
            &lt;script&gt;
            function calculate(){
                var row = document.getElementById("rows");
                var column = document.getElementById("columns");
                row.value = parseInt(row.value);
                column.value = parseInt(column.value);
                var perform = document.getElementById("perform");

                for (var x = 0; x &lt; parseInt(row.value); x++) {
                    var arr = document.getElementsByName("add" + x);
                    var rowTotal = 0;
                    var colTotal = 0;
                    for(var y = 0 ; y &lt; parseInt(column.value); y++){
                        if(parseInt(arr[y].value))
                            rowTotal += parseInt(arr[y].value);
                    }
                    if(perform.value == "sum"){
                        document.getElementById("output" + x + y).value = rowTotal;

                    }else if(perform.value == "mean"){
                        document.getElementById("output" + x + y).value = rowTotal / parseInt(row.value);

                    }

                }

            }
        &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
    &lt;div id="boxs"&gt;
    &lt;/div&gt;
    &lt;div id="matrix"&gt;
        Rows&lt;input type="text" id="rows"&gt;
        Columns&lt;input type="text" id="columns"&gt;
        &lt;button id="button" onclick="grid()"&gt;Create Grid&lt;/button&gt;&lt;br&gt;&lt;br&gt;
        &lt;select id="perform"&gt;
            &lt;option value="sum"&gt;sum&lt;/option&gt;
            &lt;option value="mean"&gt;Mean&lt;/option&gt;
            &lt;option value="mode"&gt;Mode&lt;/option&gt;
            &lt;option value="median"&gt;Median&lt;/option&gt;
        &lt;/select&gt;&lt;br&gt;
        &lt;button id="calculate" onclick="calculate()"&gt;Calculate&lt;/button&gt;&lt;br&gt;&lt;br&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>I realize its probably quite messy but i am very new to this. Any help or guidance would be very much appreciated. Thanks in advance.</p>
