0

基本的に、テキスト ボックスにテキストを入力し、[投稿を追加] をクリックすると、新しい投稿が他の投稿のリストの先頭に追加されます (Twitter と同様)。これらの投稿にはそれぞれ「削除」ボタンがあります。

今のところ、各投稿で削除をクリックするconsole.logと、「TEST」とだけ表示されます。そして、それはうまくいきます。ただし、投稿を追加した後、つまり新しい要素が追加された後、イベントリスナーは、既存の「削除」ボタン (新しく追加されたボタンだけでなく) に対しても機能しなくなります。

これは、削除のイベントリスナーを作成した方法です。

for(var i = 0; i < deleteDOM.length; i++) {
   deleteDOM[i].addEventListener("click", deleteEntryCont);
}

...今のところdeleteEntryCont、コンソールが「TEST」をログに記録する機能はどこにありますか。

deleteDOMの変数でdocument.getElementsByClassName("delete")あり、単なるノード リストです。

新しい「投稿」が追加された部分は次のとおりです。

entryList.forEach(function(entry) {

        var entryItemDOM = document.createElement("li");
        var entryTextDOM = document.createElement("p");
        var metaWrapperDOM = document.createElement("div");
        var timeStampDOM = document.createElement("span");
        var deleteDOM = document.createElement("span");

        // Create entry wrapper & class names
        entryItemDOM.className = "entry";
        entryItemDOM.className += ` ${entry.mood}-entry`;
        entryItemDOM.id = entry.id;

        // Insert entry at the top of the stack
        domEl.entriesDOM.insertBefore(entryItemDOM, domEl.entriesDOM.firstChild);

        entryItemDOM.appendChild(entryTextDOM);
        entryTextDOM.innerHTML = entry.text;

        entryItemDOM.appendChild(metaWrapperDOM);
        metaWrapperDOM.className = "overflow-hidden";

        metaWrapperDOM.appendChild(timeStampDOM);
        timeStampDOM.className = "timestamp";
        timeStampDOM.innerHTML = entry.timeStamp;

        metaWrapperDOM.appendChild(deleteDOM);
        deleteDOM.className = "delete";
        deleteDOM.innerHTML = "Delete";


      });

entryList上記のコードが HTML でレンダリングするオブジェクトの配列はどこにありますか。

問題は何ですか？

4

1 に答える 1