Pulling data from Firebase Realtime Database

Question

I am trying to pull data from my Realtime database in the form of a list that i can style into a leader board but am having issues with connecting it. The errors showing up are that document.getElementById is not a function and that window.onload(FetchAllData()); is not a function

This is the layout of my database: how my database looks

This is my 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>

I want to be able to pull the username and score into a table that orders them in terms of their score going from highest to lowest.

I also want to know if it is possible to create multiple arrays of data for different sections. Currently this is only showing the user score for a maths quiz but i want to keep the scores and user name for two different quizzes in the same place, is it possible for me to do this or do i need to have them in different databases?

Answer 1

You have syntax errors in your js code. That's why the above mentioned errors had occurred.

The first line of function addItemsToList should be changed like this.

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

It is not getElementsById . It is getElementById . s should be removed from the funtion.

And you cannot call functions on window.onload like this. (Refer this link ) Use the following instead.

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

or

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