Error em um evento JavaScript

Programação
#1

Tô com error no meu evento mas não consigo resolver.
OBS: Quando tento salvar no meu VSCODE, a IDE da um espaçamento automático. Não sei se isso pode interferir em algo.
Erro: TypeError: null is not an object (evaluating ‘botao.addEventListener’)
Meu HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tarefas</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <script>
        let botao = document.querySelector("#adicionar-btn ");
        botao.addEventListener("click", (e) => {
            alert('teste')
        })
    </script>
</head>

<body>
    <header>
      
    </header>
    <main class="corpo">
        <h2 class="paciente-corpo">Meus Pacientes</h2>
        <hr>
        
        <section>
            <h2 class="paciente-corpo ">Adicionar novo paciente</h2>
            <ul id="mensagem-erro">
                <li></li>
            </ul>
            <hr>
            <form id="form-adiciona">
                <div>
                    <label for="nome " id="label-nome ">Nome</label>
                    <input id="input-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 % de gordura " class=" campo campo-medio ">
                </div>

                <button id="adicionar-btn " class=" botao bto-principal ">Adicionar</button>
            </form>
        </section>
</body>
</html>
#2

Testei aqui e o espaço no "#adicionar-btn " não interfere não, embora seja estranho o formatter do VS Code estar inserindo ele automáticamente…

Bom, mas o problema é que seu <script> é executado antes de o botão existir na página, por isso ele retorna null.

Para evitar problemas deste tipo, coloque seu <script> no final do <body>, logo antes da tag de fechamento.

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>

  <body>
    <!-- ... -->

    <button id="adicionar-btn" class="botao bto-principal">Adicionar</button>

    <!-- ... -->

    <script>
      let botao = document.querySelector("#adicionar-btn ");
      botao.addEventListener("click", (e) => {
        alert("teste");
      });
    </script>
  </body>
</html>

Assim vc garante que quando o <script> for executado, todos os elementos da página já terão sido criados.

1 curtida
#3

Ou vc pode usar o evento DOMContentLoaded, para garantir que o código só vai rodar depois que o HTML foi carregado:

window.addEventListener('DOMContentLoaded', function() {
    let botao = document.querySelector("#adicionar-btn ");
    etc...
});

Assim fica mais flexível, pois tanto faz se o script está no início ou final da página.

1 curtida
#4

Obrigado pela ajuda!

#5

Valeu pela dica! Agora eu entendi o real problema. :wink: