[Dúvida] Estou com dúvida

No JS:

const controle = document.querySelectorAll ("[data-controle]");     


const estatisticas = document.querySelectorAll ("[data-estatisticas]");

const botão = document.getElementById ("botão");
const submenu = document.getElementById ("lista");

const linksCores = document.querySelectorAll('.lista_robos_cores');


const pecas = {
    "bracos": {
        "forca": 29,
        "poder": 35,
        "energia": -21,
        "velocidade": -5
    },

    "blindagem": {
        "forca": 41,
        "poder": 20,
        "energia": 0,
        "velocidade": -20
    },
    "nucleos":{
        "forca": 0,
        "poder": 7,
        "energia": 48,
        "velocidade": -24
    },
    "pernas":{
        "forca": 27,
        "poder": 21,
        "energia": -32,
        "velocidade": 42
    },
    "foguetes":{
        "forca": 0,
        "poder": 28,
        "energia": 0,
        "velocidade": -2
    }
}


function manipulaDados (operacao, controle) {
    const peca = controle.querySelector ("[data-contador]"); 
    if (operacao === "-") {
        peca.value= parseInt (peca.value) -1;
    } else {
        peca.value =parseInt (peca.value) +1;
    }
}


function atualizaEstatisticas (peca,operacao) { 
    if (operacao==="-"){
        estatisticas.forEach((elemento)=>{
        elemento.textContent= parseInt(elemento.textContent) - pecas[peca][elemento.dataset.estatisticas]; 
        });
    } else {
        estatisticas.forEach((elemento)=>{
            elemento.textContent= parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatisticas]; 
        });
    }
}   


controle.forEach ((elemento) => { 
    elemento.addEventListener("click", (evento) =>{ 
        manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
        atualizaEstatisticas(evento.target.dataset.peca, evento.target.dataset.controle); 
    })
})


botão.addEventListener ("click", (evento) => {
    submenu.classList.toggle ("ativo");
})

Eu tinha a resposta desse exercício na minha mente ontem, mas acabei só estilizando o menu, e deixei para fazer o JS hoje, só que saiu da minha cabeça a resposta kkkkk. O que eu posso fazer para quando eu clicar nas cores que desejo, trocar a imagem do Robotron? Será que fiz certo no HTML ?

Opa Victor, tudo certo?

Em relação ao HTML, percebi que criou uma div com a classe e identificador botão, nesse caso está era para ser um <button>? Já que no final do código há um fechamento de uma tag button, mas não ocorre sua abertura.

</ul>
</button>
</div>
</section>

Em relação ao Javascript, com apenas a chamada de uma classe no javascript não sei ao certo como você planejava prosseguir. No entanto, com o conteúdo criado no HTML, o que pode desenvolver a partir deste ponto é além de recolher as cores do robô, também recolher a informação de origem da imagem principal (src). Por exemplo, atribuindo para a imagem principal o data atributte "robo":

            <img class="robo" data-robo src="img/Robotron 2000 - Rosa.png" alt="Robotron" id="robotron">

Desta forma, quando uma das opções da lista (li) for clicada, faremos com que a fonte da imagem principal mude para a cor selecionada. Para isso teremos que chamar a imagem principal no javascript. Além disso, sugiro utilizar os data atributtes criados nas suas listas ao invés das classes:

const linksCores = document.querySelectorAll("[data-cores]")
const robo = document.querySelector("[data-robo]")

• O data atributte data-cores possue uma definição própria para cada imagem e pode ajudar na hora de mudar para uma em específica.

O próximo passo seria criar um laço de repetição para que quando ocorrer o evento de click a fonte da nossa imagem mude para a fonte da cor selecionada:

linksCores.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        evento.preventDefault();
        robo.src = `img/Robotron 2000 - ${elemento.dataset.cores}.png`;
    });

});

• O "elemento" é um parâmetro qualquer utilizado para identificar qual dos elementos de cor estamos clicando;
• O "robo.src =" vai definir a src da imagem principal para a cor selecionada por meio de uma alteração direta no html (template literals);
• Dentro do template literals vamos realizar uma interpolação com javascript por meio do cifrão e chaves;

No fim, a interpolação ${elemento.dataset.cores} vai ser substituída pelo data-cor definido no elemento clicado. Como, por exemplo, se clicarmos no elemento com data-cores=Rosa, a src do robo vai se tornar:

img/Robotron 2000 - Rosa.png

Tendo essa imagem no nosso projeto, estamos referenciando ela como imagem principal.

Acredito que algo nessa linha pode funcionar. Deixo abaixo um artigo sobre template literals caso tenha interesse em se aprofundar no assunto:

• Tagged Template Literals

Fico à disposição.

Tenha um bom dia e bons estudos.