Entrar Ainda não tem acesso?
2
respostas

O span não aparece

Referente ao curso JavaScript: programando na linguagem da web, no capítulo AjaxBuscando pacientes com AJAX e atividade Mãos na massa: lidando com erros da requisição

por Virginia
| 58.4k xp | 17 posts
var botaoAdicionar = document.querySelector("#buscar-paciente");

botaoAdicionar.addEventListener("click", function() {
    var xhr = new XMLHttpRequest();

    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacient35");

    xhr.addEventListener("load", function() {
        var erroAjax = document.querySelector("#erro-ajax");
        if (xhr.status == 200){
            erroAjax.classList.add("invisivel");
             console.log(xhr.responseText);
            var resposta = xhr.responseText;
            var pacientes = JSON.parse(resposta);

            pacientes.forEach( function(paciente){
                adicionaPacienteNaTabela(paciente);
            });
        }else{
            console.log(xhr.status);
            console.log(xhr.responseText);
            erroAjax.classList.remove("invisivel");
        }


    });

    xhr.send();
});
2 respostas
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

Boa noite, Virginia! Como vai?

Ocorre algum erro no console do navegador no momento do click do botão? Se sim, vc poderia colar aqui a mensagem de erro, por favor? Um detalhe importante é que o span só irá aparecer em caso de erro na requisição!

Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!

por cesar augusto bacelar junior
| 208.8k xp | 2 posts
Desenvolvedor frontend

Olá Virginia, Boa noite.

A primeira coisa que percebi foi que no seu código o Botão adicionar "var botaoAdicionar = document.querySelector("#buscar-paciente");". Tem um pequeno erro na seleção da ID, que no caso seria "#buscar-pacientes", levando em consideração o exemplo do curso que baixei.

Bom, eu dei uma revisada e foi esse o erro que eu encontrei, formatei o código retirando os "console.log" para ficar mais legível e coloquei o "xhr.send()" logo abaixo do open(), porque faz mais sentido.

espero ter ajudado.

Abraços e jamais desista.

var botaoAdicionar = document.querySelector("#buscar-pacientes");

botaoAdicionar.addEventListener("click", function() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api-pacientes.herokuapp.com/pacient35");
    xhr.send();

    xhr.addEventListener("load", function() {
        var erroAjax = document.querySelector("#erro-ajax");

        if (xhr.status == 200){
            let resposta = xhr.responseText;
            let pacientes = JSON.parse(resposta);
            erroAjax.classList.add("invisivel");

            pacientes.forEach( function(paciente){
                adicionaPacienteNaTabela(paciente);
            });
        }else{
            erroAjax.classList.remove("invisivel");
        }
    });
});