Entrar Ainda não tem acesso?
2
respostas

Desafio de adicionar o evento click

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Iniciando o projeto Fokus e atividade Desafio: adicionando evento de click

por Alan Martins Vargas
| 162.3k xp | 41 posts
Desenvolvedor front end

No CSS foi definido as cores do gradiente da variável de descanso longo

[data-contexto="foco"] {
    --main-bg-color: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%);
}

[data-contexto="descanso-curto"] {
    --main-bg-color: linear-gradient(180deg, #0F725C 0%, #041832 48.44%, #01080E 100%);
}

[data-contexto="descanso-longo"] {
    --main-bg-color: linear-gradient(180deg, #1875E9 0%, #01080E 48.44%, #0858a3 100%);
}

Logo após ela é referenciada ao clicar no botão de descanso longo

const html = document.querySelector('html');

const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');

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

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

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

longoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto','descanso-longo')
})
2 respostas
por Neilton Seguins
| 329.8k xp | 467 posts
Instrutor Instrutor e desenvolvedor de software

Olá, Alan!

Pelo que entendi, você já fez a parte de adicionar o evento de clique ao botão "Descanso longo". No entanto, parece que você adicionou o evento de clique ao botão "Foco" duas vezes, o que pode estar causando algum conflito.

O seu código atual está assim:

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

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

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

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

Você pode ver que o evento de clique para o botão "Foco" foi adicionado duas vezes. Eu acredito que isso possa ter sido um erro de digitação. O código correto seria:

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

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

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

Com esse código, cada botão deve alterar a cor do gradiente conforme definido no CSS quando clicado.

Espero ter ajudado e bons estudos!

por Joao Luiz Grave Gross
| 123.4k xp | 7 posts
Analista de Suporte em TI

Obrigado pelo compartilhamento!