Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I code a lot in php but not much in javascript. This script was written to self total a matrix so that both rows and columns are totaled. Right now it works in compatability mode on IE7 but not otherwise. I would appreciate a more learned review of the code - I'm guessing it's something simple but I've not figured it out...

I realize it's a bit of code - I've tried to format it for easy review - but I'm really not sure what's up. I honestly thought it was all good until I changed compatability settings and realized it's hosed everywhere else...

Thank you in advance for your kind consideration - happy to answer any questions or provide additional info!

//declare variables
var sq = new Array();
for (i = 0; i < 50; i++) {
    sq[i] = new Array();
}
var totTot = new Array();
var curCode = new Array();
var curCol = new Array();
var curRow = new Array();
var curVal = new Array();

//following function calculates first the column totals, then the row totals 
//based and finally the intersection of the column and row totals

function calculate(cols, cell, col, row) {
    //verify numeric   
    var numericExpression = /^([1-9][0-9]*(\.[0-9]+)?|0\.[0-9]+|\.[0-9]+|0)$/;
    if (cell.match(numericExpression)) {
        sq[col][row] = cell;
    }
    else {
        sq[col][row] = 0;
        document.getElementById("c" + col + "-r" + row).value = "";
    }
    var colTot = 0;
    var rowTot = 0;
    var total = 0;
    for (r = 0; r < 14; r++) {
        if (sq[col][r] > 0) {
            colTot += (sq[col][r]) * 1;
        } //set column total
        else {
            colTot += 0;
        }
        if (colTot > 0) {
            //write the column total
            document.getElementById('col' + col).innerHTML = colTot;
        }
        //if 0 don't write anything
        else {
            document.getElementById('col' + col).innerHTML = '';
        }
    }
    for (c = 0; c < cols; c++) {
        if (sq[c][row] > 0) { //set row total
            rowTot += (sq[c][row]) * 1;
        }
        else {
            rowTot += 0;
        }
        if (rowTot > 0) {
            //write the row total
            document.getElementById('row' + row).innerHTML = rowTot;
        }
        //nothing if 0
        else {
            document.getElementById('row' + row).innerHTML = '';
        }
        totTot[row] = rowTot * 1;
    }
    for (t = 0; t < 14; t++) {
        if (totTot[t] > 0) {
            total += (totTot[t]) * 1;
        }
        else {
            total += 0;
        }
    }
    if (total > 0) {
        //write total at intersection of row/column total
        document.getElementById('totals').innerHTML = total;
    }
    else {
        document.getElementById('totals').innerHTML = '';
    }
}​

//this function takes the existing values (previously entered) places them in the grid and runs the 'calculate' function

function getCurValues(cols) {
    for (var a = 0; a < curCode.length; a++) {
        var nameVar = "_" + curCode[a] + "-" + curRow[a];
        document.getElementById(nameVar).value = curVal[a];
        calculate(cols, curVal[a], curCol[a], curRow[a]);
    }​ 

//following are the arrays that hold the previous data

curCode[0]='1035';
curVal[0]=5;
curRow[0]=5;
curCol[0]=3;

//Here's a couple rows of the HTML:

  <table><tr>
  <td><input name='_1000-0' type='text' id='c0-r0' class='input' onblur='calculate(3,value,0,0)' size='3' /></td>
  <td><input name='_1004-0' type='text' id='c1-r0' class='input' onblur='calculate(3,value,1,0)' size='3' /></td>
  <td><input name='_1005-0' type='text' id='c2-r0' class='input' onblur='calculate(3,value,2,0)' size='3' /></td>
  <td class='rowTot' width='25px'><div id='row0'></div></td>
</tr>
<tr>            
  <td><input name='_1000-1' type='text' id='c0-r1' class='input' onblur='calculate(3,value,0,1)' size='3' /></td>
  <td><input name='_1004-1' type='text' id='c1-r1' class='input' onblur='calculate(3,value,1,1)' size='3' /></td>
  <td><input name='_1005-1' type='text' id='c2-r1' class='input' onblur='calculate(3,value,2,1)' size='3' /></td>
  <td class='rowTot' width='25px'><div id='row1'></div></td>
</tr>
<tr>            
  <td class='colTot'><div id='col0'></div></td>
  <td class='colTot'><div id='col1'></div></td>
  <td class='colTot'><div id='col2'></div></td>
  <td class='totTot'><div id='totals'><div></td>
</tr></table>
share|improve this question
Where is this code erroring? – Bryan Downing Feb 14 '12 at 20:29
@MattFenwick - Sorry, I wasn't aware - can I move it/delete it? – jlisham Feb 14 '12 at 20:33
1  
I think @rontornambe hit it on the head. It doesn't appear that you are targeting your element IDs correctly. – Bryan Downing Feb 14 '12 at 20:46
1  
None of your IDs start with _. – Bryan Downing Feb 14 '12 at 20:48
2  
IE8 will actually get the element by name with getElementById. Another reason I prefer to use jQuery which is consistent across browsers. – ron tornambe Feb 14 '12 at 21:02
show 8 more commentsadd comment (requires an account with 50 reputation)

migrated from stackoverflow.com Feb 14 '12 at 21:22

closed as off topic by sepp2k Feb 14 '12 at 23:17

Questions on Code Review Stack Exchange are expected to relate to code review request within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Browse other questions tagged or ask your own question.