Requisição AJAX recarrega a página

Front-end
, ,
#1

Estou tentando fazer uma página que consulte o CEP digitado para preencher automaticamente os campos do formulário. Estou seguindo o tutorial desse post https://www.alura.com.br/artigos/preenchendo-formulario-html-automaticamente-com-ajax

Porém quando eu clico no botão ele recarrega a página inteira e não preenche o formulário. Segue o código:
HTML

<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>

JS
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(); 

}

function preencheCampos(json) { 

    document.querySelector('input[name=endereco]').value = json.logradouro;

    document.querySelector('input[name=bairro]').value = json.bairro; 

    document.querySelector('input[name=complemento]').value = json.complemento;

    document.querySelector('input[name=cidade]').value = json.localidade; 

    document.querySelector('input[name=estado]').value = json.uf; }
#2

Adicione o atributo type="button" no seu button e teste de novo.

<button type="button" class="o-button--gary">
    <i class="icon-globe"></i>
</button>
1 curtida