Minha solução para a implementação de um seletor de cores para o Robô.
Link: https://robotron-2000-swart-eight.vercel.app/
 
  
HTML:
<section class="robotron">
            <img class="robo-imagem" id="robo" src="img/robotron.png" alt="Robotron" id="robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>
<section>
            <div class="seletor">
                <h2 style="font-size: 1.7em;">Spray</h2>
                <button class="botao" id="Vermelho"></button>
                <button class="botao" id="Azul"></button>
                <button class="botao" id="Amarelo"></button>
                <button class="botao" id="Branco"></button>
                <button class="botao" id="Preto"></button>
                <button class="botao" id="Rosa"></button>
            </div>
        </section>
CSS:
#Vermelho {
    background: no-repeat center/70% url(../img/Vermelho/Robotron\ 2000\ -\ Vermelho.png);
    background-color: var(--main-branco);
  }
  #Azul {
    background: no-repeat center/70% url(../img/Azul/Robotron\ 2000\ -\ Azul.png);
    background-color: var(--main-branco);
  }
  #Amarelo {
    background: no-repeat center/70% url(../img/Amarelo/Robotron\ 2000\ -\ Amarelo.png);
    background-color: var(--main-branco);
  }
  #Branco {
    background: no-repeat center/70% url(../img/Branco/Robotron\ 2000\ -\ Branco.png);
    background-color: var(--main-branco);
  }
  #Preto {
    background: no-repeat center/70% url(../img/Preto/Robotron\ 2000\ -\ Preto.png);
    background-color: var(--main-branco);
  }
  #Rosa {
    background: no-repeat center/70% url(../img/Rosa/Robotron\ 2000\ -\ Rosa.png);
    background-color: var(--main-branco);
  }
JS:
const botoes = document.querySelectorAll(".botao")
botoes.forEach( (elemento) => {
    elemento.addEventListener("click", (evento) => {
        mudaCor(evento.target.id)
    })
}) 
function mudaCor(cor){
    document.querySelector(".robo-imagem").src="img/" + cor + "/Robotron 2000 - " + cor + ".png";
}
 
            