4
\$\begingroup\$

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); 
}
\$\endgroup\$
5
  • \$\begingroup\$ No, it does not. Sorry, but it looks pretty bad. You're using ids like arrays, editing HTML as strings and so on. \$\endgroup\$ Jun 13 '13 at 18:53
  • \$\begingroup\$ Figured. How should I do it? I won't lie. I am basically a very old rookie who never done much. You know, hobby. \$\endgroup\$
    – Matthew
    Jun 13 '13 at 19:07
  • \$\begingroup\$ JQuery has a lot to offer for an example like this. DOM manipulation and iteration, AJAX abstractions, and browser abstraction. \$\endgroup\$
    – Dan Ross
    Jun 13 '13 at 19:15
  • \$\begingroup\$ I haven't cared for JQuery much, but should I start using that over JS? \$\endgroup\$
    – Matthew
    Jun 13 '13 at 19:34
  • \$\begingroup\$ Nothing wrong with using plain JS in my opinion, especially if you don't plan to make very large projects or have to share code with others using jQuery \$\endgroup\$
    – Stuart
    Jun 13 '13 at 19:38
6
\$\begingroup\$
  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.

\$\endgroup\$
5
  • \$\begingroup\$ Could you explain the first part with how children works? I believe I know how it works, but I just want to verify. I have never used it before. \$\endgroup\$
    – Matthew
    Jun 14 '13 at 0:41
  • 1
    \$\begingroup\$ x.children just gets all the elements contained within an element x. It returns them in whatever order they appear in the HTML. Have a look at this jsfiddle.net/nBanC \$\endgroup\$
    – Stuart
    Jun 14 '13 at 19:15
  • \$\begingroup\$ Thanks. So it doesn't need an ID or anything? It returns all of them as the first element it detects to the last? In order, not by anything. \$\endgroup\$
    – Matthew
    Jun 17 '13 at 7:55
  • \$\begingroup\$ yep. when you have multiple elements all performing the same function it's better not to give them all individual ids but to find some other way to distinguish them. \$\endgroup\$
    – Stuart
    Jun 17 '13 at 22:59
  • \$\begingroup\$ Okay thank you. Now I know for future reference. I knew there was a better way, just didn't know what. So if I changed that and a few others things, my code would look better? \$\endgroup\$
    – Matthew
    Jun 23 '13 at 6:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.