[Projeto] Minha solução

Olá Mateus, tudo bem?

Excelente! Obrigada por compartilhar conosco a sua solução, tenho certeza que ajudará outros estudantes!

Em caso de dúvidas ou dificuldades, estamos por aqui.

Abraços e bons estudos!

Ola ! Me inspirando na solução do Matheus, cosegui chegar em uma resolução. :)

const robo = document.querySelector(".robo");

var cores = ["Robotron 2000 - Amarelo.png", "Robotron 2000 - Azul.png", "Robotron 2000 - Branco.png", 
"Robotron 2000 - Preto.png", "Robotron 2000 - Rosa.png", "Robotron 2000 - Vermelho.png"];
let i = 1;

if(i < 5) {

 robo.addEventListener("click", ()=>{
     robo.src= `img/${cores[i]}` 
    console.log(i)
    i++
    if(i >5){

        i = 0;

        }
})
}

<section class="robotron">
            <img class="robo" src="img/Robotron 2000 - Amarelo.png">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>

Salve Rafa, bom saber que pude ajudar de alguma forma. Só gostaria de te dar um toque! A ideia do JavaScript é ser dinâmico, ou seja, o código deve se adaptar para 1 ou 1000 itens. Por conta disso, usar o i > 5 não é recomendado, o ideal seria pegar o tamanho do array através da propriedade length, ficando i > robo.length no seu caso. Imagine que você queira retirar uma cor ou adicionar outras, o código pararia de funcionar...

É importante para a gente que ta aprendendo a ir treinando nossa atenção para códigos dinâmicos, abraço e bons estudos!!

Fala Mateus .. Com certeza, você tem razão. Usar" .length" para arrays é bem mais prático e não tem erro caso a quantidade de itens venha a alterar. Aproveitando a deixa; durante a busca da solução para resolver a questão das cores, eu tinha tentado utilizar a tag "button"para que ao clicar, fosse alterado as cores, porém me deparei com o seguinte problema: Cada vez que eu ativava a função com o clicar do botão, ele iterava pelos intens da array em fração de segundos, e em seguida retornava para o estado inicial, como se tivesse feito um reload, o resultado é que não saia da cor default. Sendo assim, só consegui resolver, clicando diretamente na imagem do robo contudo, gostaria de entender qual foi o problema, e como utilizar com o "button".

Rapaz, só analizando o código pra te dizer o por que desse comportamento.

Mas imagino que um dos problemas seja decorrente do tamanho da imagem que acaba sobressaindo os botões próximo dela.

Bom dia Matheus ! Realmente pode ser isso, pois quando atingi o botão iniciar produção da um tipo de re-start. Mas está tranquilo, o importante é que cheguei em uma solução. Obrigado.