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

[Dúvida] Não funcionou

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Iniciando o projeto Fokus e atividade Alterando data attributes

por Vitor Andreola Ferreira
| 101.3k xp | 5 posts

Fiz o mesmo código apresentado na aula e não está funcionando:

const html = document.querySelector('html')

const foco = document.getElementsByClassName('app__card-button--foco')
const curto = document.getElementsByClassName('app__card-button--curto')
const longo = document.getElementsByClassName('app__card-button--longo')

foco.addEventListener('click', () => {
  html.setAttribute('data-contexto', 'foco')
})

curto.addEventListener('click', () => {
  html.setAttribute('data-contexto', 'descanso-curto')
})

Não está funcionando e no console retorna o seguinte:

Uncaught TypeError: foco.addEventListener is not a function at script.js:7:6

2 respostas
solução!
por ICARO FERREIRA DE ARAUJO FILHO
| 100.1k xp | 23 posts
Analista de Desenvolvimento Jr

Bom dia. Isto ocorre pq o método getElementsByClassName retorna uma lista. Você precisa dizer qual elemento da lista você quer adicionar o evento por meio do index.

foco[0].addEventListener('click', () => {
  html.setAttribute('data-contexto', 'foco')
})

Ou então executar um laço de repetição para implementar em todos os elementos retornados da sua query.

por Vitor Andreola Ferreira
| 101.3k xp | 5 posts

Diferente do professor, eu quis usar o getElementByCLassName ao invés do querySelector apenas para praticar os códigos já aprendidos.

Mas descobri que quando usamos o getElementByCLassName retorna uma lista de elementos, mesmo que haja apenas um elemento com essa classe. Logo, tenho que indicar qual elemento vou selecionar (nesse caso [0]).

Então para resolver esse problema é só utilizar o querySelector ou indicar o elemento no final do getElementByClassName:

const foco = document.querySelector('.app__card-button--foco')

ou

const foco = document.getElementByClassName('app__card-button--foco')[0]