4
respostas

Como funciona um evento DOM dentro de uma estutura de repetição

Eai, galera? Gostaria de saber mais de como funciona o evento "onclick" dentro da estrutura de repetição... Sei utilizá-los separadamente e entendi a lógica de forma geral, porém, ainda sinto que não está tão claro (a utilização dos dois juntos) e que estou precisando entender melhor alguma coisa... Acredito que se alguém conseguir descrever o passo a passo irá me ajudar muito!

4 respostas

Oi, Bruna! Tudo bem?

Quando utilizamos o evento "onclick" dentro de uma estrutura de repetição, estamos atribuindo uma função a ser executada quando ocorrer um clique em um elemento específico. Por exemplo, vamos supor que exista uma lista de botões e queremos executar uma ação diferente para cada botão quando clicado.

Aqui está um exemplo de como podemos fazer isso:

// Criando uma lista de botões
var botoes = document.querySelectorAll('.botao');

// Iterando sobre a lista de botões
for (var i = 0; i < botoes.length; i++) {
  // Adicionando o evento "onclick" a cada botão
  botoes[i].onclick = function() {
    // Ação a ser executada quando o botão for clicado
    console.log('Botão ' + (i + 1) + ' clicado!');
  };
}

Nesse exemplo, estamos selecionando todos os elementos com a classe "botao" e atribuindo o evento "onclick" a cada um deles. Quando um botão for clicado, a função dentro do evento será executada e exibirá uma mensagem no console.

É importante destacar que, dentro da função do evento "onclick", podemos acessar as propriedades do elemento que foi clicado utilizando a palavra-chave "this". Isso nos permite realizar ações específicas para cada elemento.

Espero que essa explicação tenha sido clara e te ajude a entender melhor como funciona o evento "onclick" dentro de uma estrutura de repetição. Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓

Obrigada pela explicação! Nesse caso e no exemplo do curso, a estrutura de repetição é executada/inicializada toda vez que ocorre um clique?

Não nesse caso do exemplo a estrutura de repetição for já será executada junto com a inicialização do arquivo javaScript

Uma vez que o arquivo foi inicializado e carregado, entendo que a estrutura de repetição será executada automaticamente até que a condição estabelecida seja "false", mas após isso, se o usuário clicar no elemento, ela não teria que ser executada novamente? assim como todas as vezes que ocorrer o evento?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software