Entrar Ainda não tem acesso?
3
respostas

Como fazer cada click percorrer item por item em um array?

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

por Daniel Costa
| 303.5k xp | 28 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

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
| 303.5k xp | 28 posts
Porteiro

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

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];
});