Observe o trecho de código utilizado em um blog para registrar cliques em vários botões de curtir: Nesse contexto, explique como o uso do forEach() contribui para reutilizar a mesma lógica de interação em vários botões da página.
Questão
Observe o trecho de código utilizado em um blog para registrar cliques em vários botões de curtir:
Nesse contexto, explique como o uso do forEach() contribui para reutilizar a mesma lógica de interação em vários botões da página.
botoes.forEach(function(botao) {
botao.addEventListener("click", botaoClicado);
function botaoClicado() {
console.log("fui clicado");
let texto = botao.querySelector("span");
texto.textContent++;
}
});
Resposta
93%O forEach() percorre a lista/coleção botoes e executa a mesma função para cada botão. Assim, sem repetir código manualmente para um por um, o trecho dentro do forEach:
- recebe o botão da vez (
botao) e registra nele o mesmo listener:botao.addEventListener("click", botaoClicado); - define a mesma lógica de clique (
botaoClicado) que será reutilizada em todos: ao clicar, registra no console, procura ospandentro daquele botão (botao.querySelector("span")) e incrementa o contador (texto.textContent++).
Como o botao está no “escopo” da iteração, cada handler fica associado ao elemento correto, reaproveitando a mesma regra de interação para vários botões da página com um único bloco de código.
Explicação
O objetivo é aplicar a mesma regra de interação (ouvir clique e incrementar o número) em vários elementos.
botoesrepresenta uma lista de botões (por exemplo, resultado de umquerySelectorAll).forEach(function(botao){ ... })executa o bloco uma vez para cada item da lista, passando o item atual como parâmetrobotao.- Dentro do bloco, é adicionado o mesmo evento de clique em todos os botões (
addEventListener("click", botaoClicado)). - A função
botaoClicado()usa obotaocorrespondente daquela iteração para encontrar ospaninterno e incrementar o texto. Comobotaoé “capturado” pelo escopo da iteração, cada clique altera o contador do botão certo.
Assim, o forEach() permite reutilizar a mesma lógica em múltiplos botões, evitando duplicação de código e garantindo comportamento consistente.
Alternativa correta: (sem alternativas).