Olá, tudo bem?
Uma solução que achei foi essa (eu separei os robôs em uma pasta específica):
no html está assim:
<section class="robotron">
<img class="robo" src="./pack-robos/Robotron 2000 - Azul/robotron.png" alt="Robotron" id="robotron"/>
<figcaption class="titulo">ROBOTRON <br />2000</figcaption>
</section>
e no JS foi assim:
const coresRobo = [
"./pack-robos/Robotron 2000 - Amarelo/robotron.png",
"./pack-robos/Robotron 2000 - Azul/robotron.png",
"./pack-robos/Robotron 2000 - Branco/robotron.png",
"./pack-robos/Robotron 2000 - Preto/robotron.png",
"./pack-robos/Robotron 2000 - Rosa/robotron.png",
"./pack-robos/Robotron 2000 - Vermelho/robotron.png",
];
const roboClicavel = document.querySelector("#robotron");
roboClicavel.addEventListener("click", (evento) => {
trocaCor(evento);
});
let i = 0;
function trocaCor(evento) {
if (i==coresRobo.length) {
i = 0;
evento.target.src = coresRobo[i];
i++;
} else {
evento.target.src = coresRobo[i];
i++;
}
}