Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Nao consigo entender como o foreach está funcionando

por Maria Alcilania Batista De Lima
| 69.4k xp | 17 posts

nesse codigo o professor fez um foreach e aplicou uma função a ser executada que é contexto.ClassList.remove('active'), mas se o contexto nao é nenhuma classe, como ele conseguiu executar o classList?

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')
const banner = document.querySelector('.app__image')
const titulo = document.querySelector('.app__title')
const botoes = document.querySelectorAll('.app__card-button')

focoBt.addEventListener('click', () => {
    alterarContexto('foco')
    focoBt.classList.add('active')
})

curtoBt.addEventListener('click', () => {
    alterarContexto('descanso-curto')
    curtoBt.classList.add('active')
})

longoBt.addEventListener('click', () => {
    alterarContexto('descanso-longo')
    longoBt.classList.add('active')
})

function alterarContexto(contexto) {
    botoes.forEach(function(contexto){
        contexto.classList.remove('active')
    })
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `/imagens/${contexto}.png`)
    switch (contexto) {
        case "foco":
            titulo.innerHTML = `
            Otimize sua produtividade,<br>
                <strong class="app__title-strong">mergulhe no que importa.</strong>
            `
            break;
        case "descanso-curto":
            titulo.innerHTML = `
            Que tal dar uma respirada? <strong class="app__title-strong">Faça uma pausa curta!</strong>
            ` 
            break;
        case "descanso-longo":
            titulo.innerHTML = `
            Hora de voltar à superfície.<strong class="app__title-strong"> Faça uma pausa longa.</strong>
            `
        default:
            break;
    }
}
1 resposta
solução!
por Carlos Eduardo de Souza Lemos
| 872.5k xp | 252 posts
Analista de Suporte

No código fornecido, o nome contexto está sendo usado de duas maneiras diferentes: como parâmetro da função alterarContexto e como variável de iteração no forEach dentro dessa função. Isso pode causar confusão.

Na realidade, a variável de iteração no forEach não é o mesmo contexto passado como parâmetro da função. No contexto da função de callback do forEach, contexto refere-se a cada elemento do array botoes. Portanto, quando o código executa contexto.classList.remove('active'), está removendo a classe active de cada botão individualmente.

Para evitar essa confusão, é melhor nomear a variável de iteração de forma diferente do parâmetro da função. Por exemplo:

function alterarContexto(contextoAtual) {
    botoes.forEach(function(botao){
        botao.classList.remove('active')
    })
    html.setAttribute('data-contexto', contextoAtual)
    banner.setAttribute('src', `/imagens/${contextoAtual}.png`)
    switch (contextoAtual) {
        // casos restantes...
    }
}

Dessa forma, fica claro que contextoAtual é o parâmetro da função e botao é a variável de iteração no forEach.