從 Firebase 實時數據庫中提取數據

Question

我正在嘗試以列表的形式從我的實時數據庫中提取數據，我可以將其設置為排行榜的樣式，但在連接它時遇到問題。 出現的錯誤是document.getElementById不是 function 和window.onload(FetchAllData()); 不是 function

這是我的數據庫的布局：我的數據庫的外觀

這是我的 javascript=

 function addItemsToList(name, score){ var ul=document.getElementsById('highScoresList'); var header= document.createElement('h2'); var header= document.createElement('li'); //the number of highscores shown var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); var header= document.createElement('li'); header.innerHTML= 'Highscores-'+ (++scores) _name.innerHTML='Name: '+name; _score.innerHTML='Score: '+score; ul.appendChild(header); ul.appendChild(_name); ul.appendChild(_score); } //calls for the data from database function FetchAllData(){ firebase.database().ref('scores').once('value', function(snapshot){//a snapshot is a picture of the data at a particular database reference at a single point in time snapshot.forEach( function(ChildSnapshot){ let name= ChildSnapshot.val().name; let score= ChildSnapshot.val().score; addItemsToList(name,score); } ) }) } window.onload(FetchAllData());

 <div class="container"> <div id="highScores" class="flex-center flex-column"> <h1 id="finalScore">High Scores</h1> <ul id="highScoresList"> </ul> <a class="btn" href="home.html">Go Home</a> </div> </div>

我希望能夠將用戶名和分數拉到一個表格中，該表格根據他們的分數從高到低對它們進行排序。

我還想知道是否可以為不同部分創建多個數據 arrays。 目前這僅顯示數學測驗的用戶分數，但我想將兩個不同測驗的分數和用戶名保留在同一個地方，我可以這樣做還是需要將它們放在不同的數據庫中？

Answer 1

您的 js 代碼中有語法錯誤。 這就是發生上述錯誤的原因。

function addItemsToList的第一行應該這樣改。

var ul=document.getElementById('highScoresList');

它不是getElementsById 。 它是getElementById 。 s應該從函數中刪除。

而且你不能像這樣調用window.onload上的函數。 （請參閱此鏈接）改用以下內容。

window.onload = () => FetchAllData();

或者

window.onload = () => {
    console.log('Onload function called');
    FetchAllData();
}