No aparece el error dentro del span al hacer click en el boton

var botonBuscar = document.querySelector("#buscar-paciente")

botonBuscar.addEventListener("click",function(){
    console.log("buscando pacientes")
    var xhr = new XMLHttpRequest;
    xhr.open("Get","https://alura-es-cursos.github.io/api-paci111entes/pacientes.json");

    xhr.addEventListener("load",function(){

        var errorAjax = document.querySelector("#error-ajax")
        if(xhr.status == 200){
            errorAjax.classList.add("invisible")
            respuesta = xhr.responseText;
            var pacientes = JSON.parse(respuesta);
            pacientes.forEach(function(paciente){
            adicionarPacienteEnLaTabla(paciente);
            });
        }else{
            errorAjax.classList.remove("invisible")
            console.log(xhr.status)
            console.log(xhr.responseText)
        }





    })


    xhr.send();
})

parte de html:

                <span id="error-ajax" class="invisible">Error al buscar los pacientes</span>