javascript - コード Javascript を修正 (Jquery なし!)

Question

ここにいくつかのコードがあります (コードが長すぎて申し訳ありませんが、私は「ニワトリ」なので、コードを修正するために何が必要なのかわかりません! どうもありがとうございました! そして、私の英語はとても下手です。文法の間違いがあります）。Hello ボタンをクリックすると、tbody タグの appendChild() ではなく、tbody タグの子の appendChild() が実行されないのはなぜですか? また、関数 BuildTable() が使用またはアクティブ化されている場合にのみ、このビットのコードを実行することをブラウザに伝えることができるのはなぜですか。これは私が言っている部分です：

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);
}

そして、これは私の完全なコードです!

これは私のHTMLコードです

<!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>

そして、これは私のJavascriptコードです:

// 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);
}

助けてくれてありがとう！

score 2 · Accepted Answer

これは宿題のようです (「私は Javascript を学んでいて、先生は私は Javascript しか使えないと言いました!」というコメントのため)、これを修正するためのいくつかのヒントを提供します。

elemは 53 行目でとして定義されていvar elem = getInfo().elem;ます。このスクリプトはページの読み込み時に実行され、HTML ソースには入力の値がありません。したがってelem、値を取得し""てループを追加inputしtd、テーブル本体への要素が実行されないようにします。実行するループの属性value="1"(または 2、30、400、30,000 など) を追加します。
ユーザーが「Hello」ボタンをクリックした後に実際にループを実行したい場合、そのループを別の関数に配置する必要があります。その関数は後で呼び出すBuild_Table();か、単純に関数定義内 (最後) に配置する必要があります。属性をBuild_Table追加する代わりに。value
このコードのバグの大部分は、次の 2 つのスタイル上の問題の結果です。
- 「変数巻き上げ」をご存じないようですね。多くの変数を定義していますが、巻き上げのために正しく初期化されません。関数の先頭ですべての変数を定義し (実行中に変数が定義されるため)、後でより適切なタイミングで初期化します。
- 不十分なスコープ。ほとんどの変数はグローバル名前空間で宣言されているため (そこにある必要はありません)、デバッグが少し面倒です。コードをより多くの関数に分割してみて、それらの関数に対してローカルな変数のみを宣言してください。関数スコープ外の変数が本当に必要な場合 (これはめったにないか、そうあるべきです)、1 つのグローバル変数を定義し、関数スコープ外で必要な変数を表すプロパティをそれに追加します。

以下は、グローバル名前空間で変数を 1 つだけ使用する例です。

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

これが役に立ち、あなたの任務がうまくいくことを願っています。

javascript - コード Javascript を修正 (Jquery なし!)

1 に答える 1

Related

Reference