atribuição do addEventListener a uma var não funciona !!

Estou tentando pausar a atualização do formulário para enviar um msg pro console, mas a "var botao" que faz referencia a tag button apresenta esse erro.

HTML:
<section class="container">
                    <h2 id="titulo-form">Adicionar novo paciente</h2>
                    <form>
                        <div class="grupo">
                            <label for="nome">Nome:</label>
                            <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
                        </div>
                        <div class="grupo">
                            <label for="peso">Peso:</label>
                            <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
                        </div>
                        <div class="grupo">
                            <label for="altura">Altura:</label>
                            <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
                        </div>
                        <div class="grupo">
                            <label for="gordura">% de Gordura:</label>
                            <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
                        </div>

                        <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
                    </form>
                </section>

JAVASCRIPT:
var botao = document.querySelector("#adicionar-paciente");

    botao.addEventListener("click", function(event){
        event.preventDefault();
        console.log("Oi, eu sou o goku!");
    });

Console do google: Uncaught TypeError: Cannot read property 'addEventListener' of null

Console do editor de texto: Brackets ERROR:'document' is not defined [no-undef]