Entrar Ainda não tem acesso?
1
resposta

[Bug] [Erro no console]

por Elisandra Santos de Lima
| 41.9k xp | 4 posts
document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('.input_item'); 
    const btnSalvar = document.querySelector('.button-item');

    btnSalvar.addEventListener('click', function(event) {
        event.defaultPrevented();
        console.log(input.value);
    });

    
});

eu não conseguir rodar essa função, não saiu como esperado

HTML:

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>

    <form>
        <input class="input-item" type="text" placeholder="Digite a tarefa que deseja adicionar"></input>
        <button class="button-item">Salvar tarefa</button>
    </form>
    
    <script defer src="script.js"></script>
 </body>

 </html>

O que há de errado? no console aparece um erro:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Mike de Sousa
| 1239.5k xp | 2179 posts
Alura Scuba Team Suporte Educacional

Olá, Elisandra, como vai?

Há dois ajustes importantes a serem feitos no seu código JavaScript. O primeiro é no querySelector do input. Você está usando .input_item como referência, mas no HTML a classe está nomeada como .input-item (com hífen, não underline). O segundo ajuste é no eventListener. A função correta para impedir o recarregamento da página ao submeter o formulário é a preventDefault(). Seu código ajustado ficaria assim:

document.addEventListener('DOMContentLoaded', function () {
  const input = document.querySelector('.input-item');
  const btnSalvar = document.querySelector('.button-item');

  btnSalvar.addEventListener('click', function (event) {
    event.preventDefault();
    console.log(input.value);
  });
});

Sobre os erros no console, eles parecem estar relacionados a alguma extensão do Chrome e não ao código do projeto em si. Recomendo testar em uma janela anônima ou desabilitar extensões para verificar se os erros persistem.

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