The first click on the image doesn't activate the onclick function

When the page loads for the first time and I press the button on the first click, it doesn't trigger the onclick function. If I press it a second and subsequent times it triggers the event.

JS:

var balao = document.getElementById('balao');
document.getElementById('moscovo').onclick = function () {
    document.getElementById("balao").style.display = "block";
    balao.classList.toggle('fade');
}

CSS:

#balao {
    width: 350px;
    position: absolute;
    top: 4rem;
    left: 157rem;
    z-index: 5;
    display: none;

    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

I don't know how to solve

Via Active questions tagged javascript - Stack Overflow https://ift.tt/hWwKnml