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
respostas
O span não aparece
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!
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");
}
});
});