Desafio de adicionar o evento click | JavaScript: manipulando elementos no DOM

2
respostas

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

| 126.2k xp | 35 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

| 320.2k xp | 466 posts

Instrutor Instrutor e desenvolvedor de software

14/09/2023

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

| 71.5k xp | 7 posts

Analista de Suporte em TI

14/09/2023

Obrigado pelo compartilhamento!