Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

mensagem de erro nao e exibida

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

por Renato Rebouças
| 91.8k xp | 119 posts
desenvolvedor

Ao clicar no botao a mensagem de erro nao e exibida.

var btnAdc = document.querySelector("#btnAdc");

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

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

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

        if(xhr.status == 200){
            var resposta = xhr.responseText;
            var jsonPacientes = JSON.parse(resposta);

            jsonPacientes.forEach(function (jsonPaciente) {
            adicionaPaciente(jsonPaciente);
        });            
        }else{
            // console.log(xhr.status);
            // console.log(xhr.responseText);  
            erroAjax.classList.remove("invisivel");
        }
    });

    xhr.send();

});
9 respostas
por Dayele Cruz
| 145k xp | 6 posts

Olá!

Seu código funciona. Possíveis causas 1)Nome da classe "invisivel". 2)Seu arquivo javascript pode não ter sido carregado. Neste caso você pode verificar usando a aba Network do DevTools do seu navegador, basta recarregar a página e ver se o seu script foi carregado.

Código testado

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <title>Alurapic</title>

    </head>
    <style>
    .invisivel{
        display: none;
    }
    </style>
    <body >
        <div class="container">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>
            <div id="erro-ajax" class="invisivel"> Um erro ocorreu</div>
            <input type="submit" id="btnAdc" value= "clique" >
        </div><!-- fim container -->
    </body>
    <script>
    var btnAdc = document.querySelector("#btnAdc");

btnAdc.addEventListener("click", function(e){
   // e.preventDefault;
    var xhr = new XMLHttpRequest();

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

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

        if(xhr.status == 200){
            var resposta = xhr.responseText;
            var jsonPacientes = JSON.parse(resposta);

            jsonPacientes.forEach(function (jsonPaciente) {
            adicionaPaciente(jsonPaciente);
        });            
        }else{
            // console.log(xhr.status);
            // console.log(xhr.responseText);  
            erroAjax.classList.remove("invisivel");
        }
    });

    xhr.send();

});
    </script>
</html>
por Thiago Tadashi Shirota
| 223.5k xp | 12 posts

Olá Renato, eu testei seu código aqui e deu certo, poste o html ou verifique como está o id da tag span

por Renato Rebouças
| 91.8k xp | 119 posts
desenvolvedor 
<span id="erro-ajax" class="invisivel"></span>
            <button id="btnAdc" type="submit" name="button">Buscar Paciente</button>            
        </section>
    </main>
por Dayele Cruz
| 145k xp | 6 posts

A tag span não contém o texto que deve ser exibido.

por Renato Rebouças
| 91.8k xp | 119 posts
desenvolvedor

Mas no caso eu coloco o texto pelo javascript.

por Dayele Cruz
| 145k xp | 6 posts

Por favor, coloque a parte do código que vc atribui o texto a tag span.

por Douglas Fortunato
| 73k xp | 2 posts

Boa noite, Renato.

No código que você mostrou, não está sendo inserido texto na tag Span via JavaScript, você apenas remove a classe invisivel, mas o span não tem texto para mostrar.

por Renato Rebouças
| 91.8k xp | 119 posts
desenvolvedor

Agora não me vem a cabeça qual seria o código pra inserir?

solução!
por Dayele Cruz
| 145k xp | 6 posts
erroAjax.innerHTML = "Seu texto aqui...";
erroAjax.classList.remove("invisivel");