3
respostas

Solução um pouco troca cor do robô:

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++;
   }
}
3 respostas

Eu não compreendi porque a necessidade de colocar uma parametro dentro da função trocaCor

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

No HTML incluí o data-cor na img do robotron e criei nova section para inserir os botões de alteração de cor e fiz os ajustes necessários no CSS


<section class="robotron">
            <img class="robo" src="img/Robotron2000-Amarelo.png"  data-cor="amarelo" alt="Robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
</section>


<div class="skin">
         <label for="" class="skin-titulo">Cor</label>
               <div class="controle">
                     <buttom class="controle-ajuste" data-ajusteskin="-"><</buttom>
                     <input type="text" disabled class="controle-contador-skin" value="amarelo">
                     <buttom class="controle-ajuste" data-ajusteskin="+">></buttom>
               </div>
</div>

No JS eu fiz os códigos abaixo:

const robo = document.querySelector('.robo')

const sourceSkin =  [
    "img/Robotron2000-Amarelo.png",
    "img/Robotron2000-Azul.png",   
    "img/Robotron2000-Branco.png",
    "img/Robotron2000-Preto.png",
    "img/Robotron2000-Rosa.png",
    "img/Robotron2000-Vermelho.png"
]

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



controleSkin.forEach( (objeto) => {
    objeto.addEventListener('click', (evento) => {
        alterarSkin(evento.target.dataset.ajusteskin,robo.dataset.cor,evento.target.parentNode )
    } )
})

function alterarSkin(operacao, corAtual, itemPai){

    let posicaoCor = corSkin.indexOf(corAtual)
    let visor = itemPai.querySelector('.controle-contador-skin')

    if (posicaoCor<(corSkin.length-1) && operacao == "+"){
        robo.attributes.src.value = sourceSkin[posicaoCor+1]
        robo.dataset.cor = corSkin[posicaoCor+1]
        visor.value = corSkin[posicaoCor+1]
    } else if (posicaoCor>=(corSkin.length-1) && operacao == "+") {
        robo.attributes.src.value = sourceSkin[0]
        robo.dataset.cor =  corSkin[0]
        visor.value = corSkin[0]
    } 

    if (posicaoCor>0 && operacao == "-") {
        robo.attributes.src.value = sourceSkin[posicaoCor-1]
        robo.dataset.cor =  corSkin[posicaoCor-1]
        visor.value = corSkin[posicaoCor-1]
        console.log(posicaoCor)
    } else if (posicaoCor<=0 && operacao == "-"){
        robo.attributes.src.value = sourceSkin[corSkin.length-1]
        robo.dataset.cor =  corSkin[corSkin.length-1]
        visor.value = corSkin[corSkin.length-1]
    }

}

@Fellipe, tudo certo?

Estou executando a troca de cor no evento de clique em cima da imagem do robô. Quero que troque de cor cor a cada clique, tirando o parâmetro, o código não funciona.

Att.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software