1
resposta

[Projeto] Desafio concluído.

Adicionei apenas um botão na mesma "div" que o botão iniciar "produção" e com o addEventListener conseguir implementar um evento que ao clicar ele mude o atributo da imagem "SRC", Ainda estou pensando em como simplificar o código, caso consiga posto aqui, também aceito sugestões de melhoria.

HTML

<div class="btn-cor-producao">
                   <input data-trocaCor class="producao" type="button" value="Trocar cor">
                    <input type="submit" value="Iniciar produção" class="producao" id="producao">
                </div>

CSS

.btn-cor-producao{
    position:absolute;
    width: 80vw;
    height: 700px;
    display: flex;
    flex-direction: column;

JavaScript

const robo = document.querySelector('.robo')
const troca = document.querySelector('[data-trocaCor]')
const cor = ['img/Robotron 2000 - Azul.png','img/Robotron 2000 - Amarelo.png','img/Robotron 2000 - Preto.png','img/Robotron 2000 - Vermelho.png','img/Robotron 2000 - Rosa.png','img/Robotron 2000 - Branco.png']
let number = 1

troca.addEventListener("click",(elemento)=>{
    robo.setAttribute('src',cor[number])
    if(number >= cor.length-1){
        number = 0
    }else {
        number++
    }
})

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

1 resposta

Olá, Nathan.

Tudo bem?

Muito obrigado por compartilhar o seu código e a sua solução aqui com a gente. Ficamos muito felizes em saber que você está de fato praticando e evoluindo. Meus parabéns, está ficando muito bom! Continue assim.

Se precisar de ajuda manda aqui. Valeu :)

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