爲什麼document.getElementById不在這裏工作？

-1

我正在使用我的第一個純JavaScript應用程序，我無法弄清楚爲什麼我的document.getElementById在下面的代碼塊的最後一塊不起作用。我用document.addEventListener('DOMContentLoaded', function() {first functions called}開始我的腳本，並且元素無障礙地加載到DOM。爲什麼document.getElementById不在這裏工作？

在將元素添加到我的頁面之前，我的代碼是跳到最後一個塊（開始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' 
}

感謝您的建議！

來源

2016-08-11 dedaumiersmith

對象屬性區分大小寫。它應該是'clearFilter.id'。 – JJJ

哦，所以我爲對象創建了一個新的鍵和值，而不是設置ID。得到它了。謝謝！ – dedaumiersmith

除了你的拼寫錯誤，你的問題是你沒有添加創建的ul到DOM。創建x之前，該行添加到您的代碼

document.body.appendChild(categoryUL);

，因爲否則將不會出現在文檔對象模型（DOM）等，document.getElementById不能拿來。

P.S：如果您打算使用循環創建多個li，請確保您爲每個li提供不同的ID。根據規範，id在DOM中必須是唯一的。

P.P.S：與您的代碼的其他問題是

Id應改爲id調用由document.getElementById
refineMenu未定義

來源

2016-08-11 20:34:33 naveen

爲什麼document.getElementById不在這裏工作？

回答

相關問題