Managing debit/credit accounts

Question

I just want to know if there room for improvement or something I should redo to be better.

var dataCell = new Array();
    dataCell[0] = document.getElementById("data0");
    dataCell[1] = document.getElementById("data1");
    dataCell[2] = document.getElementById("data2");
    dataCell[3] = document.getElementById("data3");
    dataCell[4] = document.getElementById("data4");
    dataCell[5] = document.getElementById("data5");
    dataCell[6] = document.getElementById("data6");
    dataCell[7] = document.getElementById("data7");
    dataCell[8] = document.getElementById("data8");
    dataCell[9] = document.getElementById("data9");
var d = new Date();
var transactionNumber;
var post;

var accountId = new Array();
var account = new Array();
var credit = new Array();
var debit = new Array();

function newEntry() {
    post = 0;
    requestHighTransactionNumber();

    dataCell[0].innerHTML = "<td id='date'><div id='year' contenteditable='true'>"+d.getFullYear()+"</div>-<div id='month' contenteditable='true'>"+parseInt(d.getMonth()+1)+"</div>-<div id='day' contenteditable='true'>"+d.getDate()+"</div></td><td id='source'  contenteditable='true'></td><td id='account'><div class='accountId' id='accountId0' contenteditable='true'></div>&nbsp;&nbsp;&nbsp;&nbsp;<div class='accountName' id='accountName0' contenteditable='true'></div></td><td class='debit' id='debit0' contenteditable='true'>0.00</td><td class='credit' id='credit0' contenteditable='true' onkeypress='addRow(1);'>0.00</td><div id='transactionNumber' style='visibility:hidden;position: absolute;'>"+transactionNumber+"</div>";
    dataCell[1].innerHTML = "";
    dataCell[2].innerHTML = "";
    dataCell[3].innerHTML = "";
    dataCell[4].innerHTML = "";
    dataCell[5].innerHTML = "";
    dataCell[6].innerHTML = "";
    dataCell[7].innerHTML = "";
    dataCell[8].innerHTML = "";
    dataCell[9].innerHTML = "";
}

function addRow(offset) {
    var  i = offset;

        dataCell[i].innerHTML = "<td></td><td></td><td id='account'><div class='accountId' id='accountId"+i+"' contenteditable='true'></div>&nbsp;&nbsp;&nbsp;&nbsp;<div class='accountName' id='accountName"+i+"' contenteditable='true'></div></td><td class='debit' id='debit"+i+"' contenteditable='true'>0.00</td><td class='credit' id='credit"+i+"' contenteditable='true' onkeydown='addRow("+parseInt(i+1)+");'>0.00</td><div id='transactionNumber' style='visibility:hidden;position: absolute;'>"+transactionNumber+"</div>";
        post = i;


}

function genPost() {
    var ajaxRequest;  // The variable that makes Ajax possible!

        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }


        var i = 0;
        while (i <= post) {
            if(document.getElementById("accountName"+i) != null) {
                if(document.getElementById("accountId"+i) != null) {
                    var month = document.getElementById("month").innerHTML;
                    var day = document.getElementById("day").innerHTML;
                    if(month < 10) {month = 0+month};
                    if(day < 10) {day = 0+day};
                  date = document.getElementById("year").innerHTML+"-"+month+"-"+day;
                  dateFind = document.getElementById("year").innerHTML+month+day;
                  account[i] = document.getElementById("accountName"+i).innerHTML;
                  accountId[i] = document.getElementById("accountId"+i).innerHTML;
                  source = document.getElementById("source").innerHTML;
                  debit[i] = document.getElementById("debit"+i).innerHTML;
                  credit[i] = document.getElementById("credit"+i).innerHTML;
                }
            }
            if (account[i] != "") {
                ajaxRequest.open("GET", "post1.php?date="+date+"&accountId="+accountId[i]+"&account="+account[i]+"&source="+source+"&dateFind="+dateFind+"&debit="+debit[i]+"&credit="+credit[i]+"&transactionNumber="+transactionNumber, false);
            }

            ajaxRequest.send();
            i++;
        }
}




//Init function for post number.
requestHighTransactionNumber();
function requestHighTransactionNumber() {
var ajaxRequest;  // The variable that makes Ajax possible!

        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                transactionNumber = parseInt(ajaxRequest.responseText)+1;
            }
        }
        ajaxRequest.open("GET", "transactionNumber.php", true);
        ajaxRequest.send(null); 
}

Answer 1

1. Where you have a load of html elements with similar functions it's useful to either include them in one containing element or give them all the same class. Then you can access them in the JavaScript using:

   var dataCell = document.getElementsByClassName('dataCells');
   

   or

   var dataCell = document.getElementById('dataContainer').children;
   

2. You could use for loops to avoid repetition:

   for (var i = 1; i < 9; i++) {
       dataCell[i] = '';
   }
   

3. You use a while loop (while (i <= post)) where one would normally use for:

   for (var i = 0; i < post; i++) {...
   

4. You could use an Ajax function to avoid repetition of that bit of code:

   function getAjaxRequest() {
       var ajaxRequest;
       try {
           // ...
           return ajaxRequest;
   }
   

   If you extend your code you will ultimately want a more capable function for controlling ajax requests, in which case look at this Stack Overflow answer. Not using synchronous requests is probably good advice. Also, I think the usual way of dealing with IE is as shown here.

5. It is better to build HTML using createElement and appendChild rather than setting the innerHTML. In particular, using innerHTML to set event handlers will get confusing and unreadable very quickly for code of any complexity. Better to do something like...

   var creditTd = document.createElement('td');
   creditTd.className = 'credit';
   creditTd.id = 'credit0';
   creditTd.addEventListener('keypress', function() {
       addRow(1);
   });
   creditTd.contentEditable = "true";
   dataCell[0].appendChild(creditTd);
   

   ... even though this admittedly takes up a lot more lines. But you can then set up functions to remove any repetitive parts of this code.