Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Alguém me ajuda?

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Comportamento do formulário e atividade Capturando valor do input

por Lucas Pereira de Lima
| 264.3k xp | 525 posts

Não consigo escrever na tabela de tarefas e mandar a informação para o console.log. Meus códigos:

html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&amp;family=Space+Mono&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Ceep</title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list">
        <li class="task">
          <p class="content">
            Comprar um abacate
          </p>
        </li>
      </ul>
    </div>
    <script src="listaDeTarefas.js"></script>
</body>
</html>

JS

const novaTarefa = document.querySelector('[data-form-button]');



 novaTarefa.addEventListener('click', () => {
    const input = document.querySelector('[data-form-button]')
    const valor = input.value
    console.log( valor )
})
2 respostas
solução!
por Giovanna Moeller
| 625.1k xp | 892 posts
Instrutor iOS Software Engineer

Oi Lucas, tudo bem?

O seu código tem dois errinhos! Vou te explicar o que está acontecendo! Primeiramente, quando você declarou a variável input, você utilizou o mesmo querySelector para o botão, então na verdade você está pegando o botão novamente, e não o input! O correto deveria ser assim:

const input = document.querySelector('[data-form-input]');

Mas, na verdade, não é uma boa prática declarar essa variável input dentro do evento! Veja que ela não muda, sempre retornará o mesmo elemento HTML, então pra não ficar criando variáveis muitas vezes (já que o evento click pode ser chamado várias vezes), o ideal é você declará-la fora da função, logo abaixo da variável novaTarefa:

const novaTarefa = document.querySelector('[data-form-button]');
const input = document.querySelector('[data-form-input]');

 novaTarefa.addEventListener('click', () => {
    const valor = input.value;
    console.log( valor );
})

Até aí tudo bem? Agora vamos para o 2º errinho: por que o console.log() não está sendo mostrado?

Isso acontece porque o seu botão é um botão de envio de dados de um formulário. E ele possui um comportamento padrão que não é muito desejado no caso: toda vez que enviamos algum dado de um formulário, ele dá um refresh na página! Por isso o console.log() não está sendo mostrado, porque ele atualiza a página e todos os dados são perdidos!

Para evitar isso, precisamos barrar esse comportamento padrão! E como fazemos isso? Passando o evento para a função e então adicionando o método preventDefault(), dessa maneira:

 novaTarefa.addEventListener('click', (event) => {
    event.preventDefault();
    const valor = input.value
    console.log( valor )
})

A palavra "prevent" vem de prevenir, enquanto a palavra "default" significa padrão. Ou seja, prevenir esse comportamento padrão!

Agora, a sua página não vai mais atualizar depois do clique no botão (quando os dados do formulário são enviados), pois barramos esse comportamento! Deu pra entender?

Espero ter ajudado, qualquer outra dúvida estou à disposição! Bons estudos!

por Lucas Pereira de Lima
| 264.3k xp | 525 posts

Muito obrigado, você me salvou. Espero algum dia ter o conhecimento de algum membro do time da Alura.