Solucionado
Se apartir do momento que o elemento recebe a estilizacão pela classe "active" --> elemento.classList.add('active') e logo apos é chamado o forEach que remove-los --> contexto.classList.remove('active')
Como o elemento que foi clicado ainda permanesse com o "active? Ja que foi feito um Looping em cada um dos elementos para remover todos os "actives"?
hoje, com a Alura e o Google Gemini
Oi Luis, tudo bem?
Entendo sua dúvida, é uma questão muito interessante.
O que ocorre é que a remoção da classe 'active' de todos os elementos é feita antes de adicionar a classe 'active' ao elemento clicado. Então, quando você clica em um botão, o código primeiro remove a classe 'active' de todos os botões e, em seguida, adiciona a classe 'active' ao botão que foi clicado. Isso é feito para garantir que apenas o botão clicado tenha a classe 'active' e os demais não.
Vamos analisar um exemplo prático para entender melhor. Suponha que temos três botões: focoBt, curtoBt e longBt. Quando você clica no botão focoBt, o código faz o seguinte:
Então, mesmo que a classe 'active' seja removida de todos os botões no início, ela é adicionada novamente ao botão focoBt logo em seguida. Isso é feito para cada botão, então quando você clica em qualquer botão, ele se torna o único botão com a classe 'active'.
Espero que isso esclareça sua dúvida! Lembre-se, a ordem das operações é crucial aqui: primeiro removemos a classe 'active' de todos os botões e depois a adicionamos ao botão clicado.
Um abraço e bons estudos.
perfeito! obrigado!