Entrar Ainda não tem acesso?
1
resposta

[Duvidas] Referente ao desafio proposto

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Detectando interações e atividade Lista de exercícios

por CHRISTOFFERSON GUTEMBERGUE OLIVEIRA SILVA
| 26.9k xp | 7 posts

Boa noite, estou com algumas referente ao desafio

 <form>
    <input class="input-item" type="text" placeholder="Digite a tarefa que deseja adicionar"></input>
    <button class="button-item">Salvar tarefa</button>
</form>

const botaoAdd = document.getElementById('input-item')
const SalvarItem = document.getElementById('salvar-item')

SalvarItem.addEventListener('click', function(){
    console.log(botaoAdd.value)
})

Está falando que está com erro na linha do Evento, porem não estou entendendo qual erro seria.

Porque teria que usar o GetElementById sendo que não tem nehum ID?

Ultima duvida, não entendi pq foi puxado o "salvar-item". Sendo que ele não foi mencionado e sim o button-item

1 resposta
por Yuri Fernandes Faustino Reis
| 82.3k xp | 40 posts

Olá Christofferson, bom dia! Tudo bom?!

Vi que você está usando o getElementById, mas os elementos não tem ID's. No lugar dele você pode usar o querySelector e selecionar eles pela classe colocando um ponto, desta maneira:


<form>
    <input class="input-item" type="text" placeholder="Digite a tarefa que deseja adicionar"></input>
    <button class="button-item">Salvar tarefa</button>
</form>

JavaScript:

const botaoAdd = document.querySelector('.input-item');

const salvarItem = document.querySelector('.button-item');

salvarItem.addEventListener('click', function(){
    console.log(botaoAdd.value);
});

O porque de usar o getElementById talvez seja para uso futuro quando o mesmo for adicionado ao elemento, mas por agora, o uso dele está impossibilitado pois o elemento não possui ID. E isso que gerou o error pois retorna null porque não existe ID.

A questão do porque foi puxado o "salvar-item" é por que o nome da variável 'salvarItem' foi usado para representar o botão com a classe button-item.

Qualquer dúvida, estou a disposição!