[Dúvida] Parâmetro do contexto.classList.remove

Oi, Igor, tudo bem?

A lógica do contexto.classList.remove('active') é remover a classe active de todos os botões antes de adicionar a classe active ao botão correspondente. Isso é feito para garantir que apenas um botão fique ativo por vez.

Por exemplo, se você clicar no botão "Foco", a classe active será removida dos botões "Descanso curto" e "Descanso longo" para que apenas o botão "Foco" fique ativo. Essa lógica é aplicada para todos os botões, garantindo que apenas um deles tenha a classe active em determinado momento.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Olá, Igor. Cara, eu fiquei com a mesmissíma dúvida e só fui entender depois de quebrar a cabeça. A confusão começa pois usamos a palavra contexto como parâmetro que é passado para a função 'alterarContexto' indicando qual botão foi clicado, e em seguida, usamos o mesmo nome no forEach. Parece que estamos passando o mesmo parâmetro em ambos os casos, mas não. No Caso do forEach, a palavra "contexto" se refere ao elemento em si. Ou seja, o Elemento da lista que o ForEach percorreu. Como o ForEach percorre toda a lista, ele vai indo de elemento em elemento e removendo a classe "active".

Faz o teste, dentro do forEach muda a palavra contexto para outra qualquer. O resultado vai ser o mesmo pois a palavra que está ali é simplesmente uma referência ao elemento da lista.

Bom, pelo menos isso foi o que entendi e que fez sentido pra mim. Espero ter ajudado.

Também tive essa dúvida. O que iria solucionar isso seria utilizar um outro nome diferente de "contexto", como "botao". Assim, ficaria explícito que não tem nada a ver com o parâmetro da função, como no teste que eu fiz:

    botoes.forEach(botao => {
        botao.classList.remove('active');
    });

fiquei confusa também, mas depois que entendi achei mais fácil chamar ele de elemento ou indice

function alterarContexto (contexto) {
    botoes.forEach(function (elementoDaLista){
        elementoDaLista.classList.remove('active')
    })