Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Meu código não funciona como o do professor.

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript

por CRISTIANO FERREIRA DA SILVA
| 166.8k xp | 223 posts

Tentei fazer o código como o do professor, mas quando digito um item e clico em "novo item", no console não aparece o novo item digitado, aparece somente a mensagem "fui clicado", segue a seguir o meu código, se alguém puder me ajudar, ficaria grato. index.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>

listaDeTarefas.js

const criarTarefa = (evento) => {

    evento.preventDefault()

    const input = document.querySelector('[data-form-input]')
    const valor = input.value
    console.log( valor )
    input.value = " "
}   

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

novaTarefa.addEventListener('click', criarTarefa)
2 respostas
solução!
por Giovanna Moeller
| 626.1k xp | 892 posts
Instrutor

Oi Cristiano, tudo bem?

Rodei o seu código aqui e no console aparece o valor que foi digitado no input. Veja abaixo:

Console funcionando certinho

Isso acontece pois você pega o valor do input através do input.value e então mostra no console, através do console.log(valor).

A única coisa que não acontece é ele adicionar de fato na lista, mas é porque não tem nenhum código para isso. Para adicionar na lista, você poderia fazer algo do tipo:

const tasks = document.querySelector('.list')

const criarTarefa = (evento) => {

  evento.preventDefault()

  const input = document.querySelector('[data-form-input]')
  const valor = input.value
  console.log( valor )
  input.value = " "
  tasks.innerHTML += `<li class="task"><p class="content">${valor}</p></li>`
}   

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

novaTarefa.addEventListener('click', criarTarefa)

Espero ter ajudado =)

por CRISTIANO FERREIRA DA SILVA
| 166.8k xp | 223 posts

Olá Giovanna, tudo bem? espero que sim!

Muito obrigado pela atenção e ajuda!

Bons estudos, e até mais.