Resolvi o exercício de troca de cores assim:
const setaCores = document.querySelectorAll('[data-cor]');
const mostraCorInput = document.querySelector('[data-cores]');
const robo = document.querySelector('[data-robo]');
const vermelho = ["img/imagens-do-robotron/Vermelho/Vermelho.png", "red"];
const azul = ["img/imagens-do-robotron/Azul/Azul.png", "blue"];
const amarelo = ["img/imagens-do-robotron/Amarelo/Amarelo.png", "yellow"];
const rosa = ["img/imagens-do-robotron/Rosa/Rosa.png", "pink"];
const branco = ["img/imagens-do-robotron/Branco/Branco.png", "white"];
const preto = ["img/imagens-do-robotron/Preto/Preto.png", "black"];
const cores = [vermelho, azul, amarelo, rosa, preto, branco];
******
let clicks = 0;
let contador = 0;
setaCores.forEach(element => {
element.addEventListener('click', event => {
slideCor(event.target.dataset.cor, clicks++);
})
});
function alteraCor() {
robo.src = cores[contador][0];
mostraCorInput.style.backgroundColor = cores[contador][1];
}
function slideCor(params, clicks) {
if (params === ">") {
if (contador > cores.length - 1) {
contador = 0;
alteraCor();
contador++;
} else {
alteraCor()
contador++;
}
}
else {
if(contador == 0 && clicks == 0) {
contador = cores.length - 2;
alteraCor();
}else if(contador == 0 && clicks != 0) {
contador = cores.length - 1;
alteraCor();
}else{
contador--;
alteraCor();
}
}
}Porém, tenho uma dúvida, se eu clico na setinha da direita, para eu alterar a cor clicando na seta da esquerda, eu preciso clicar 2 vezes. O mesmo acontece quando eu clico na seta da esquerda e, logo após, vou alterar clicando na direita.
O problema acontece pois ele soma a cada vez que eu clico, e para eu diminuir, teria que diminuir por 2. Porém, não sei como fazer isso, alguma sujestão?
