1
resposta

Curso de JavaScript: Consumindo e tratando dados de uma API

Erro, ao digitar o cep, não preenche os campos especificados: Logradouro; Cidade e UF. Solicito ajuda para encontrar o erro no código JavaScript

JavaScript

async function buscaEndereco(CEP) { var mensagemErro = document.getElementById('erro'); mensagemErro.innerHTML = ""; try { var consultaCep = await fetch(https://viacep.com.br/ws/${cep}json/) var consultaCepConvertida = await consultaCep.json(); if (consultaCepConvertida.erro) { throw Error('CEP não existente!'); } var cidade = document.getElementById('cidade'); var logradouro = document.getElementById('endereco'); var estado = document.getElementById('estado');

    cidade.value = consultaCepConvertida.localidade;
    logradouro.value = consultaCepConvertida.logradouro;
    estado.value = consultaCepConvertida.uf;

    console.log(consultaCepConvertida);  
    return consultaCepConvertida;
} catch (erro) {
    mensagemErro.innerHTML = <p>CEP inválido. Tente novamente!</p>;
    console.log(erro);
}

}

var cep = document.getElementById('cep'); cep.addEventListener("focusout", () => buscaEndereco(cep.value));

// buscaEndereco()

1 resposta

Olá, Ana! Tudo bem?

Vamos ver o que pode estar acontecendo no seu código. Notei alguns pontos que podem estar causando o problema:

  1. URL da API: Na URL da API que você está usando, falta uma barra antes de "json". Ela deve ser https://viacep.com.br/ws/${CEP}/json/. Note que também é importante usar a variável correta para o CEP, que no seu código é CEP e não cep.

  2. Erro de Sintaxe no HTML: No trecho onde você está definindo a mensagem de erro, há um erro de sintaxe. O correto seria usar aspas para definir o conteúdo HTML, assim: mensagemErro.innerHTML = "<p>CEP inválido. Tente novamente!</p>";.

Verifique se essas alterações resolvem o problema. Se ainda enfrentar dificuldades, pode ser útil verificar se os IDs dos elementos HTML (cidade, endereco, estado, erro, cep) estão corretos e correspondem aos elementos no seu HTML. Se possível, peço que suba o projeto para o GitHub e me envie o link, assim eu posso ajudar de forma mais precisa.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado