Estou tentando fazer o formulário HTML + Ajax, onde ao preencher o CEP ele pega as outras informações "automaticamente", conforme o tópico da formação de front end... Mas não funciona, o código ficou assim;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax com JS Puro</title>
<link href="asserts/stylesheets/stilize/stilize.min.css" rel="stylesheet" type="text/css">
<script>
function buscaCep() {
let inputCep = document.querySelector('input\[name=cep\]');
let cep = inputCep.value.replace('-', '');
let url = 'http://viacep.com.br/ws/' + cep + '/json';
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status = 200) preencheCampos(JSON.parse(xhr.responseText));
}
}
xhr.send();
}
</script>
</head>
<body>
<form class="o-form">
<div class="o-navbar--gary">Buscando CEP com requisição JAX</div>
<div class="o-form__body o-form__body--padding">
<div class="l-row">
<div class="u-grid--2">
<label for="" class="o-form__text">CEP</label>
<div class="o-form__group">
<input class="o-form__data" name="cep" type="text">
<span class="o-form__groupElement"><button class="o-button--gary"><i class="icon-globe"></i></button></span>
</div>
</div>
<div class="u-grid--8">
<label for="" class="o-form__text">Endereço</label>
<input class="o-form__data" name="endereco" type="text">
</div>
<div class="u-grid--2">
<label for="" class="o-form__text">Numero</label>
<input class="o-form__data" name="numero" type="text">
</div>
</div>
<div class="l-row">
<div class="u-grid--8">
<label for="" class="o-form__text">Bairro</label>
<input class="o-form__data" name="bairro" type="text">
</div>
<div class="u-grid--4">
<label for="" class="o-form__text">Complemento</label>
<input class="o-form__data" name="complemento" type="text">
</div>
</div>
<div class="l-row">
<div class="u-grid--10">
<label for="" class="o-form__text">Cidade</label>
<input class="o-form__data" name="cidade" type="text">
</div>
<div class="u-grid--2">
<label for="" class="o-form__text">Estado</label>
<input class="o-form__data" name="estado" type="text">
</div>
</div>
</div>
</form>
</body>
</html>