[Dúvida] Duvida na Lógica JavaScript

Pessoal, boa tarde!

Aguardo retorno, muito obrigado!

Olá Renan!

Mas qual é a sua dúvida?

Vitor, tranquilo?

Então adicionei os botões em HTML, estilizei em CSS e criei a constante em JS referente as cores, porém agora não sei por onde ir para que o botão sinalize a troca de cor dos personagens.

Olá novamente Renan!

Parece que você está no caminho certo! Vou te ajudar a completar o código para que o botão sinalize a troca de cor dos personagens.

Antes de prosseguir, há alguns erros e ajustes que precisamos fazer:

1. Corrigir os erros de sintaxe nos botões HTML, assim como mencionei anteriormente.
2. Corrigir a declaração da variável pecas, que está faltando o sinal de igual para atribuir o valor.
3. Corrigir a função manipulaDados, onde a condição if (operacao "-") deve ser alterada para if (operacao === "-") para fazer a comparação correta.
4. Na função manipulaDados, ao subtrair 1 da variável peca.value, é preciso usar o sinal de menos (-) em vez do sinal de igual (=).
5. Na função atualizaEstatisticas, o console.log() está vazio, o que não fará nada. Você pode remover essa linha se não for necessário.

Além disso, você precisa implementar a função trocaImagem para que ela atualize a imagem do personagem com a cor selecionada. Vou assumir que a imagem do personagem é alterada pela classe "robo" e que as imagens estão salvas no diretório "img/" com os nomes "Robotron 2000 - Azul.png", "Robotron 2000 - Amarelo.png", etc.

Abaixo está o código completo com as correções e a implementação da função trocaImagem:

<section class="robotron">
    <section class="botoes">
        <button class="alterar" id="azul" onclick='trocaImagem("Azul")'>Azul</button>
        <button class="alterar" id="amarelo" onclick='trocaImagem("Amarelo")'>Amarelo</button>
        <button class="alterar" id="branco" onclick='trocaImagem("Branco")'>Branco</button>
        <button class="alterar" id="preto" onclick='trocaImagem("Preto")'>Preto</button>
        <button class="alterar" id="rosa" onclick='trocaImagem("Rosa")'>Rosa</button>
        <button class="alterar" id="vermelho" onclick='trocaImagem("Vermelho")'>Vermelho</button>
    </section>
    <img class="robo" src="img/Robotron 2000 - Azul.png" alt="Robotron">
    <figcaption class="titulo">ROBOTRON <br>2080</figcaption>
</section>

<script>
    const controle = document.querySelectorAll("[data-controle]");
    const estatisticas = document.querySelectorAll("[data-estatistica]");
    console.log(estatisticas);
    const corDoRobo = ['Amarelo', 'Azul', 'Branco', 'Preto', 'Rosa', 'Vermelho'];

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

    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) {
        estatisticas.forEach((elemento) => {
            elemento.textContent = parseInt(elemento.textContent) + corDoRobo[peca];
        });
    }

    function trocaImagem(cor) {
        const imagemRobo = document.querySelector('.robo');
        imagemRobo.src = `img/Robotron 2000 - ${cor}.png`;
        // Aqui você pode adicionar lógica adicional, se necessário
    }
</script>

Agora, quando você clicar em um botão de cor, a imagem do personagem será alterada para a cor correspondente. Lembre-se de que as imagens devem estar salvas no diretório "img/" e seguir o padrão de nome como mencionei acima.

Se precisar de mais ajuda ou tiver mais dúvidas, sinta-se à vontade para perguntar!

Oi, Renan

Pelo q eu entendi, vc está querendo trocar a imagem

No seu código, só está faltando a função "trocaImagem"

function trocaImagem(cor) {
    document.querySelector('.robo').src = "img/Robotron 2000 - " + cor + ".png";
  }

Para que funcione corretamente, todas as imagens devem estar dentro da pasta "img", e o única diferença no nome das imagens é a cor.

Pessoal, vou compartilhar meu código do GitHub com vocês para analisarem melhor, pois fiz as alterações e mesmo assim as imagens não alteram.

https://github.com/renancadnogueira/robotron/tree/main

1. Corrigir os erros de sintaxe nos botões HTML, assim como mencionei anteriormente. - Corrigido
2. Corrigir a declaração da variável pecas, que está faltando o sinal de igual para atribuir o valor. - Corrigido (A variável peças estava com o sinal de igual antes, porém as linhas não estavam abertas).
3. Corrigir a função manipulaDados, onde a condição if (operacao "-") deve ser alterada para if (operacao === "-") para fazer a comparação correta. - A condiçaõ if estava com (operacao === "-"), conforme a imagem enviada.
4. a função manipulaDados, ao subtrair 1 da variável peca.value, é preciso usar o sinal de menos (-) em vez do sinal de igual (=). O sinal de igual também estava sinalizado.
5. a função atualizaEstatisticas, o console.log() está vazio, o que não fará nada. Você pode remover essa linha se não for necessário. - Corrigido, retirei o console.log

A função trocaImagem parece não estar funcionando, não sei se consigo buscar a cor.

Agradeço imensamente a ajuda de vocês

O problema está no CSS

O "top: -5%;" da classe "robo" faz com que a imagem do robo sobreponha os botões

Ficando, os botões, inacessíveis ao clique

Solução "z-index: 999;" nos botões

.robo {
    height: 110%;
    z-index: 1;
    position: absolute;
    left: -20%;
    top: -5%; /* sobrepõem os botões */
}

.alterar{ 
    z-index: 999; /* coloca os botões acima da imagem*/
}

Luis, boa tarde!

Obrigado pela ajuda!

Consegui realizar após sua ajuda.

Valeu!