Home/ Questions/Q 8603529
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T02:20:46+00:00

I have some code here (Sorry because my code is too long but I

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    1. 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.

    2. 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.

    3. 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.

    • 0