Fix code Javascript (No Jquery!)

Question

I have some code here (Sorry because my code is too long but I am a "chicken", so I don't know what do you need to fix the code for me! Tks you so much! And my English is so bad so I have some grammar mistakes). I want to ask why when I click the Hello Button, It will not appendChild() the child of the tbody tag instead of just appendChild() the tbody tag? And Why I can tell the browser only run this bit of code when the function BuildTable() is used or activated. This is the part I'm telling:

var table = document.getElementById("form");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];

var td = thead.getElementsByTagName("td");
var td_num = td.length;
var td_class = new Array();
for(a=0;a<tattribute.length;a++){
    td_class[a] = "td_" + a;
}
var td_tag = new Array();

for(a=0;a<elem;a++){
    var tr_tag = document.createElement("tr");
    for(b=0;b<td_num;b++){
        td_tag[b] = document.createElement("td");
        td_tag[b].className = td_class[b];
        td_tag[b].appendChild(document.createElement("input"));
        tr_tag.appendChild(td_tag[b]);
    }
    tbody.appendChild(tr_tag);
}

var tr = tbody.getElementsByTagName("tr");

function SubmitForm(){
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            var input = td[b].getElementsByTagName("input");
            for(c=0;c<input.length;c++){
                td[b].innerHTML = "<p>" + input[c].value + "</p>";
            }
        }
    }
    document.getElementById("submit").value = "Edit";
    document.getElementById("submit").onclick = EditForm;
    document.getElementById("submit").parentNode.removeChild(document.getElementById("reset"));
}

function EditForm(){
    var p = tbody.getElementsByTagName("p");
    var p_value = new Array;
    for(i=0;i<p.length;i++){
        if("innerText" in p[i]){
            p_value[i] = p[i].innerText;
        }else{
            p_value[i] = p[i].textContent;
        }
    }
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            td[b].innerHTML = "<input />";
        }
    }
    var input_tag = tbody.getElementsByTagName("input");
    for(i=0;i<input_tag.length;i++){
        input_tag[i].value = p_value[i];
    }
    document.getElementById("submit").value = "Save";
    document.getElementById("submit").onclick = SubmitForm;
    var reset = document.createElement("input");
    reset.className = "button";
    reset.id = "reset";
    reset.type = "reset";
    reset.value = "Reset";
    document.getElementById("submit").parentNode.appendChild(reset);
}

And this is my full code!

This is my HTML Code

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XTHML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Home</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <h1>Periodic Table</h1>
            <form name="Periodic" method="post" action="#">
                <ul id="getInfo" style="list-style: none;">
                    <li id="elem">
                        <p>How many elements do you want to enter?</p>
                        <input />
                    </li>
                    <li id="content">
                        <ul></ul>
                    </li><!--END #content-->
                </ul>
            </form>
            <button onClick="getInfo(); BuildTable();">Hello</button>
        </div><!--END #wrapper-->
        <script src="settings.js" type="text/javascript"></script>
    </body>
</html>

And This is my Javascript code:

// This part will make the input for people so that they can enter the information
var content = document.getElementById("content");
var content_ul = content.getElementsByTagName("ul")[0];
function AddContent(){
    var p = document.createElement("p");
    p.appendChild(document.createTextNode("Attribute of the elements you want to enter"));
    var input = document.createElement("input");
    input.style.display = "block";
    var add_button = document.createElement("button");
    add_button.onclick = AddContent;
    add_button.style.display = "block";
    add_button.appendChild(document.createTextNode("Add More Attribute"));
    var delete_button = document.createElement("button");
    delete_button.onclick = DeleteContent;
    delete_button.style.display = "block";
    delete_button.appendChild(document.createTextNode("Remove Attribute"));
    var li = document.createElement("li");
    li.appendChild(p);
    li.appendChild(input);
    li.appendChild(add_button);
    li.appendChild(delete_button);
    content_ul.appendChild(li);
    return false;
}
function DeleteContent(){
    var li = content.getElementsByTagName("li");
    var last_li = li.length - 1;
    if(last_li>0){
        content_ul.removeChild(li[last_li]);
        return false;
    }else{
        alert("Error! You can't remove this attribute");
        return false;
    }   
}
(function (){
    AddContent();
})();

// This part will take the input of people
var attribute = new Array();
var content_li = content_ul.getElementsByTagName("li");
var getInfo =  function (){
    var elem = document.getElementById("elem").getElementsByTagName("input")[0].value;

    for(a=0;a<content_li.length;a++){
        attribute[a] = content_li[a].getElementsByTagName("input")[0].value;
    }
    return{
        "elem": elem 
    }
}
var elem = getInfo().elem;


// Build a table with above value
function BuildTable(){
    document.Periodic.removeChild(document.getElementById("getInfo"));
    var form = document.createElement("form");
    form.id = "form";
    var form_table = document.createElement("table");

    //Create THEAD Tag
    var form_table_thead = document.createElement("thead");
    var form_table_thead_tr = document.createElement("tr");
    var form_table_thead_td = new Array();
    for(a=0;a<attribute.length;a++){
        form_table_thead_td[a] = document.createElement("td");
        form_table_thead_td[a].className = "td_" + a;
        form_table_thead_td[a].appendChild(document.createTextNode(attribute[a]));
        form_table_thead_tr.appendChild(form_table_thead_td[a]);
    }
    form_table_thead.appendChild(form_table_thead_tr);

    // Create TBODY Tag
    var form_table_tbody = document.createElement("tbody");
    var form_table_tbody_tr = new Array();
    for(a=0;a<elem;a++){
        form_table_tbody_tr[a] = document.createElement("tr");
        var form_table_tbody_tr_td = new Array();
        for(b=0;b<attribute.length;b++){
            form_table_tbody_tr_td[b] = document.createElement("td");
            var form_table_tbody_tr_td_input = document.createElement("input");
            form_table_tbody_tr_td[b].className = "td_" + b;
            form_table_tbody_tr_td[b].appendChild(form_table_tbody_tr_td_input);
            form_table_tbody_tr[a].appendChild(form_table_tbody_tr_td[b]);
            alert(form_table_tbody_tr_td[b].innerHTML);
        }
        form_table_tbody.appendChild(form_table_tbody_tr[a]);
    }
    form_table.appendChild(form_table_thead);
    form_table.appendChild(form_table_tbody);
    document.Periodic.appendChild(form_table);
}
var table = document.getElementById("form");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];

var td = thead.getElementsByTagName("td");
var td_num = td.length;
var td_class = new Array();
for(a=0;a<tattribute.length;a++){
    td_class[a] = "td_" + a;
}
var td_tag = new Array();

for(a=0;a<elem;a++){
    var tr_tag = document.createElement("tr");
    for(b=0;b<td_num;b++){
        td_tag[b] = document.createElement("td");
        td_tag[b].className = td_class[b];
        td_tag[b].appendChild(document.createElement("input"));
        tr_tag.appendChild(td_tag[b]);
    }
    tbody.appendChild(tr_tag);
}

var tr = tbody.getElementsByTagName("tr");

function SubmitForm(){
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            var input = td[b].getElementsByTagName("input");
            for(c=0;c<input.length;c++){
                td[b].innerHTML = "<p>" + input[c].value + "</p>";
            }
        }
    }
    document.getElementById("submit").value = "Edit";
    document.getElementById("submit").onclick = EditForm;
    document.getElementById("submit").parentNode.removeChild(document.getElementById("reset"));
}

function EditForm(){
    var p = tbody.getElementsByTagName("p");
    var p_value = new Array;
    for(i=0;i<p.length;i++){
        if("innerText" in p[i]){
            p_value[i] = p[i].innerText;
        }else{
            p_value[i] = p[i].textContent;
        }
    }
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            td[b].innerHTML = "<input />";
        }
    }
    var input_tag = tbody.getElementsByTagName("input");
    for(i=0;i<input_tag.length;i++){
        input_tag[i].value = p_value[i];
    }
    document.getElementById("submit").value = "Save";
    document.getElementById("submit").onclick = SubmitForm;
    var reset = document.createElement("input");
    reset.className = "button";
    reset.id = "reset";
    reset.type = "reset";
    reset.value = "Reset";
    document.getElementById("submit").parentNode.appendChild(reset);
}

Tks you for help me!

I won't help you. Why ? You question is too long because you're lazy, you could put console.log, alert or use a debugger to have a small idea about what is going wrong. You could also provide a jsfiddle with your question to avoid the answerers to copy paste it themselves. Help yourself ! — AsTeR, Sep 29 '12 at 10:47
Yes, your code is a bit long. Could you point to the line that does not work as intened? — Bergi, Sep 29 '12 at 10:48
Any specific reason on not opting to use jQuery? Your code will be reduced to more than half its length if you use it. — verisimilitude, Sep 29 '12 at 10:59
@verisimilitude: use jQuery for reduce the current code fine, but what about 32kb jQuery base file. you are suggesting include one more js file into web store if store don't have jQuery installed yet? — Krishna Kumar, Sep 29 '12 at 11:16
@AsTeR: Sorry but I debug it but I don't see any problem! I alert but there is nothing is alert. I check that part of code but I can found any problems! And my question is very simple, I just ask why I clicked the button but the tbody child not append in it. You can check the even handle of the Hello button and you will find what function I am telling. That is the BuildTable() function. I copyed all my code because I have the second question: "I can tell the browser only run this bit of code when the function BuildTable() is used or activated". My code long just because I create many elements. — Alfred Seattle, Sep 29 '12 at 11:46
Did you try using console.log instead of alert, it lets you view you object and their values (don't tell me you use IE). — AsTeR, Sep 29 '12 at 11:50
@verisimilitude: I'm learning Javascript and my teacher said I can only use Javascript! I don't know why but I don't want to have bad mark! — Alfred Seattle, Sep 29 '12 at 11:51
Yes! I use Console in firebug and I don't have any problem instead of it not find the table variable - This is why I ask the second question. But I am take care of the first question so I don't worry about it — Alfred Seattle, Sep 29 '12 at 11:56
@K.K: An X kb file's inclusion cannot be an excuse. You posted this comment 'cause you are very obviously and apparently unbeknownst to the advantages of using an abstraction (which jQuery actually is)!. I flagged your comment as being unconstructive and off-topic. It does'nt really suit here and you are learning to be a troll. — verisimilitude, Sep 29 '12 at 14:14
@verisimilitude: yes may be An X kb file's inclusion cannot be an excuse for you, but for me, including a JavaScript library for a little task is not a good practice, i also use jquery when i works with JS but only if jquery is installed, otherwise i'll use other option too. — Krishna Kumar, Sep 29 '12 at 15:57
@K.K: That's another incredibly weird reasoning. You say that only if jQuery is installed you tend to go for it but if not you go for vanilla JavaScript?? Who is to decide whether the task is "little"? Just go through this post to understand when to use which http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery. — verisimilitude, Sep 30 '12 at 03:43
Can you quote a reference here which says inclusion of any JavaScript library is "not a good practice"? Please substantiate your weird reasoning with valid statements/articles to back up your claims. SO is a site wherein every question/series of discussion is read over by zillions world-wide. At least for me, none of your points make any sense. — verisimilitude, Sep 30 '12 at 03:46
I don't use Jquery. The first reason is because my teacher not allow us to use Javascript Library because on our textbook, we must learn Javascript before we can learn Jquery. — Alfred Seattle, Sep 30 '12 at 10:42
@AlfredSeattle: I'm not advocating you to. If your teacher dissuades, then you shouldn't be using it :) . The series of comments I posted were not for you. Your teacher is absolutely right. — verisimilitude, Sep 30 '12 at 10:46
I don't use Jquery. The first reason is because my teacher not allow us to use Javascript Library because on our textbook, we must learn Javascript before we can learn Jquery. The second reason is after learning Javascript and Jquery, I think I love Javascript much better and I want to improve my Javascript skill. I recognize Jquery is short, fast and better for work people, but I am not learning for work, I learn just for fun. Anybody in us have own hoppy, right? I love Javascript, and you love Jquery. I respect yours, so you should respect mine. — Alfred Seattle, Sep 30 '12 at 10:50
@AlfredSeattle: The above series of comments were NOT FOR YOU (they were for K.K.). I said above in a previous comment that you are very RIGHT and so is your teacher. Do you still NEED any SORT of explanation from my side? Or is it that you misinterpreted me? — verisimilitude, Sep 30 '12 at 11:01
@verisimilitude: Oh! My comments is not for you too! It for everyone like K.K expect you! — Alfred Seattle, Sep 30 '12 at 11:03

score 2 · Accepted Answer · answered Sep 29 '12 at 14:20

This seems like homework (because of your comment "I'm learning Javascript and my teacher said I can only use Javascript!"), so I will give you a few hints to fix this.

elem is defined on line 53 as var elem = getInfo().elem;. This script executes at page load, and your HTML source does not have a value for your input. Ergo, elem gets a value of "" so your loop to add input and td elements to the table body never runs. Add an attribute of value="1" (or 2, 30, 400, 30,000, etc.) for the loop to execute.
Assuming you actually want the loop to execute after the user clicks the "Hello" button, you'll need to place that loop in a different function which then needs to be called after Build_Table(); or simply place it inside the function definition (at the end) of Build_Table instead of adding the value attribute.
The majority of your bugs in this code are going to be the result of two stylistic problems:
- You seem to be unaware of "Variable Hoisting". You are defining many variables, which because of hoisting, will not initialize correctly. Define all your variables at the top of your functions (because that's where they'll be defined during execution) and then initialize them later at a more appropriate time.
- Inadequate scoping. Most of your variables are declared in the global namespace (and they do not need to be there) which makes debugging a bit of a nightmare. Try breaking your code into more functions, and only declare variables local to those functions. If you really need variables outside of your function scope (which is rare, or should be), define one global variable and add properties to it that represent the variables that you need outside of function scope.

Here is an example of using only one variable in the global namespace:

var MyGlobalVar = {
    "someFunction": function () {
        var internalVariable = 0;
        if (!MyGlobalVar.externalVariable) {
            MyGlobalVar.externalVariable = 2;
        }
        return MyGlobalVar.externalVariable + internalVariable;
    },
    "logResults": function () {
        console.log(someFunction());
    };
};
MyGlobalVar.logResults();

I hope this helps and good luck on your assignment.

Fix code Javascript (No Jquery!)

1 Answers1