Solução da nova feature

Oii, pessoal! Segue abaixo a minha resolução para a troca de imagens do robotron :)

HTML:

<section class="botoes">
            <button class="alterar producao" data-alterar="azul" onclick="trocaImagem('azul')">Robotron Azul</button>
            <button class="alterar producao" data-alterar="amarelo" onclick="trocaImagem('amarelo')">Robotron Amarelo</button>
            <button class="alterar producao" data-alterar="branco" onclick="trocaImagem('branco')">Robotron Branco</button>
            <button class="alterar producao" data-alterar="preto" onclick="trocaImagem('preto')">Robotron Preto</button>
            <button class="alterar producao" data-alterar="rosa" onclick="trocaImagem('rosa')">Robotron Rosa</button>
            <button class="alterar producao" data-alterar="vermelho" onclick="trocaImagem('vermelho')">Robotron Vermelho</button></section>

JavaScript:

function trocaImagem(alterar){
    const ImagemRobo = document.querySelector('[data-robo]');    

    const cores = [
        'azul',
        'branco',
        'preto',
        'rosa',
        'vermelho',
        'amarelo'
    ]

    if(cores.includes(alterar)){
        ImagemRobo.src = `./img/robotron-${alterar}.png`;
    }
}

O nome das imagens se encontram assim: