Como fazer cada click percorrer item por item em um array? | JavaScript: manipulando o DOM

3
respostas

Referente ao curso JavaScript: manipulando o DOM, no capítulo Calculando o poder e atividade Projeto da aula anterior

por Daniel Costa

| 223.3k xp | 18 posts

Porteiro

Olá pessoal. Estou tentado adicionar a mudança de cores no robô, mas estou com problemas, não consigo percorrer item por item a cada evento de click, ou seja primeiro click laço para no índice=0, próximo click para no índice=1... Pelo código que criei ele percorre todo array e muda para ultima cor da lista.

const corRobo = document.querySelector('.robo');
const cores = [
  './img/robotronVermelho.png', './img/robotronBranco.png', './img/robotronRosa.png', './img/robotronAmarelo.png', './img/robotronPreto.png'
];

corRobo.addEventListener('click', function() {
  for(var i = 0; i < cores.length; i++)
    corRobo.src = cores[i];
});

Alguém pode me auxiliar a percorrer um a um a cada evento de click.

3 respostas

por Ed Fernandes

| 75.7k xp | 42 posts

02/08/2022

tenta dessa forma amigo talvez resolva.

let corRobo = document.querySelector('.robo');
const cores = [
  './img/robotronVermelho.png', './img/robotronBranco.png', './img/robotronRosa.png', './img/robotronAmarelo.png', './img/robotronPreto.png'
];
let i = 0;

corRobo.addEventListener('click', function() {
  for(i in cores.length)
    corRobo.src = cores[i];
});

por Daniel Costa

| 223.3k xp | 18 posts

Porteiro

03/08/2022

Blz Ed Carlos. Seu código, ao contrário do meu que para no ultimo índice do array, para no primeiro. Mas obrigado pela atenção.

por Ed Fernandes

| 75.7k xp | 42 posts

04/08/2022

concertei , faltava a atribuição no loop testa agr.

let corRobo = document.querySelector('.robo');
const cores = [
  './img/robotronVermelho.png', './img/robotronBranco.png', './img/robotronRosa.png', './img/robotronAmarelo.png', './img/robotronPreto.png'
];
let i = 0;

corRobo.addEventListener('click', function() {
  for(i in cores.length)
    corRobo.src += cores[i];
});