0

何らかの理由で、todo リストを機能させることができません。まず、「list」という名前のグローバル変数があります。document.getElementById('GList');「Glist」は、私が持っている順序付きリスト要素の ID です。次に、「goal」という名前の ID と という関数を持つ textarea がありますAddGoal()。以下に示すように、関数が最初に行うことは、「goal」という名前の ID を持つ textarea の値を取得し、それを「goal」という名前の変数に格納することです。このような作成されたli要素を格納する「entry」と呼ばれる別の変数が作成されvar entry = document.createElement('li');ます。この変数「entry」には、次を使用して属性も与えられますentry.setAttribute. クラスとクラス名「MyList」が与えられます。以下のコードで何が起こるかというと、テキストエリアにテキストを入力すると、テキストがリストに追加され、別のアイテムをリストに追加しようとするまではすべて問題ありません。別のアイテムを追加すると、最初のアイテムが置き換えられ、追加の li 要素が追加されますが、すべて同じ置換テキストが含まれます。よろしくお願いします。

この関数の最後の部分は、最終的に、テキストエリアに入力されたテキストを順序付けられたリストとliクラス "MyList" を持つ要素に追加します。

entry.appendChild(document.createTextNode(goal));
list.appendChild(entry);

これは、クラス「MyList」でli要素を取得し、それをinnerHTMLに、p必要な画像を追加するクラスを持つ要素とdiv、テキストを含む変数goalをラップするクラス名「goalTxt」を持つ要素にする試みです要素から、そしてクラスtextareaでこれでゴール変数をラップしている理由はdiv、CSS で常に特定の位置にあることを確認できるようにするためです。

document.getElementsByClassName('MyList')[0].innerHTML = "<p class='bulletp'></p>" + "   <div class='goalTxt'>" + goal + "</div>";

完全なコードは次のとおりです。

<style>
.bulletp {
    position:relative;
    top:-2px;
    left:5px;
    height: 30px;
    width: 20px;
    background-image:url('images/point_03.png');
}
</style>
<ol id="GList"></ol>
<textarea id="goal"></textarea> 
<script>
var list = document.getElementById('GList');

function AddGoal() {
    var goal = document.getElementById('goal').value;
    var entry = document.createElement('li');
    entry.setAttribute("class", "MyList");
    entry.appendChild(document.createTextNode(goal));
    list.appendChild(entry);
    document.getElementsByClassName('MyList')[0].innerHTML = "<p class='bulletp'></p>" +
        "<div class='goalTxt'>" + goal + "</div>";
}
</script>
<input type='button' onclick='AddGoal()' value='Submit' />
4

1 に答える 1

3

を使用して更新してgetElementsByClassName('MyList')[0].innerHTMLいます。つまり、[0]常に最初の要素が更新されるclass='MyList'ため、最初のli値も更新されます。

その行はまったく必要ありません。取り除くだけです。ここにサンプルのフィドルがあります。その行全体をコメントアウトしました。

編集:代わりに、すべての に対して以下の構造を達成しようとしている場合はli、このfiddleを使用してください。

予想される構造:

<li class="MyList">
    <p class="bulletp"></p><div class="goalTxt">abcd</div>
</li>

対応コード:

function AddGoal() {
    var goal = document.getElementById('goal').value;
    var entry = document.createElement('li');
    entry.setAttribute("class", "MyList");

    var bulletp = document.createElement('p'); // to add <p> tag
    bulletp.setAttribute("class", "bulletp");
    entry.appendChild(bulletp);

    var goalTxt = document.createElement('div'); // to add <div> tag
    goalTxt.setAttribute("class", "goalTxt");
    goalTxt.appendChild(document.createTextNode(goal));

    entry.appendChild(goalTxt);
    list.appendChild(entry);
   //console.log(list.innerHTML);

}

注:タグ内で<p>orタグを使用しないことを強くお勧めします。<div><li>

于 2013-10-06T14:01:05.360 に答える