Problem calling javascript function

Question

I am making a web application with javascript, my js file has several CRUD functions, I wanted when HTML was loaded, call two functions, so I added this code:

document.addEventListener('load', function() {
    ler() //le os dados do firebase
    mostrar() //mostra esse dados formatados
})

but it doesn’t work, what’s the problem?

Edit:

As a tip, I used the window in place of document and put a alert(), for testing and worked (the alert()), then I suppose something else is causing the problem

Here is the code of ler() and mostrar():

function ler() {
    json = []

    firebaseRef.once("value")
        .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
            var key = childSnapshot.key
            var obj = childSnapshot.val()

            obj.key = key
            json.push(obj)

        })
    })
}

function mostrar() {
    receitas.innerHTML = ""

    for(var i = 0; i < json.length; i++) {
        receitas.innerHTML +=   '<div class="col s12 m4 l3">' +
                                    '<div class="card">' + 
                                        '<div class="card-image">' +
                                            '<img src="./image/default.png">' +
                                            '<span class="card-title">' + json[i].nome + '</span>' +
                                            '<span class="hide">' + json[i].key + '</span>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>'
    }
}

Both work by calling the console functions

Answer 1

Sometimes the event load may not be fired at document. Instead, use the window:

window.addEventListener('load', function() {
  alert('I am working!')
});

Answer 2

I solved the problem by changing the function mudar(), instead of making a loop to show the data she received two parameters (key and name) and called the function by passing the values instead of adding in a json