ここでdocument.getElementByIdが動作しないのはなぜですか？

Question

私は最初の純粋なJavaScriptアプリケーションで作業していますが、私は以下のコードの最後のブロックにある私のdocument.getElementByIdが機能していない理由を理解できません。私はdocument.addEventListener('DOMContentLoaded', function() {first functions called}でスクリプトを開始し、要素は問題なくDOMにロードされています。

要素がマイページに追加される前に、私のコードが最後のブロック（先頭var x）にジャンプしているという問題がありますか？もしそうなら、コードをハングアップするよう指示する方法はありますか？最終的には、document.getElementByIdを後で（DOMを変更するために）呼び出すことにします。

function populateRefineMenu(arr, chosenArr, category) { 
    var categoryUL = document.createElement('ul'); 
    categoryUL.className = 'refine-menu-ul'; 
    categoryUL.Id = 'refine-' + category; 

    var clearFilter = document.createElement('li'); 
    clearFilter.className = 'clear-filter'; 
    clearFilter.Id = 'genre-clear-filter'; 
    console.log('This ID is ' + clearFilter.Id); // logs fine 
    clearFilter.innerHTML = 'Clear Filter'; 
    console.log("clearFilter is " + clearFilter.innerHTML); // logs fine 

    refineMenu.appendChild(categoryUL); 
    categoryUL.appendChild(clearFilter); 

    var x = document.getElementById('genre-clear-filter'); 
    console.log(x) // logs "null" 
    console.log(x.innerHTML) // "cannot read property 'innerHTML' 
} 

ありがとうございました！

Answer 1

あなたのタイプミスを除いて、作成したulをDOMに追加していないという問題があります。そうでない場合​​は、ドキュメントオブジェクトモデル（DOM）には存在しませんので、document.getElementByIdはそれを取得することができない、のでxを作成する前に、あなたのコードに

document.body.appendChild(categoryUL); 

をこの行を追加します。

P.S：ループを使用して複数のliを作成する場合は、liに異なるIDを指定してください。 idは、仕様に従ってDOM内で一意でなければなりません。

P.P.S：あなたのコードと他の問題

1. Idはdocument.getElementById
2. refineMenuで呼び出すようにidに変更する必要がありますされている未定義