Entrar Ainda não tem acesso?
3
respostas

Trocar cor de robô quando clica

Referente ao curso JavaScript: manipulando o DOM, no capítulo Calculando o poder e atividade Consolidando o seu conhecimento

por Amanda Lucio
| 71.4k xp | 24 posts

Primeiramente eu salvei os robôs em uma pasta e removi o espaço dos nomes deles. Depois criei uma lista com o nome de todos os robôs, selecionei o robô com querySelector e adicionei a ele um addEventListener, sendo assim, quando clicado, ele muda a imagem src.

<img class="robo" src="robos/Robotron2000-Amarelo.png" alt="Robotron" data-robo>
const robo = document.querySelector('[data-robo]');

robo.addEventListener('click', (evento) => {
    const roboAtual = evento.target.src.split('/').pop();
    const index = robosLista.indexOf(roboAtual);
    evento.target.src = `robos/${robosLista[(index+1)%robosLista.length]}`;
});
3 respostas
por Lorena Garcia
| 8309k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Oi Amanda, tudo bem?

Parabéns por concluir mais uma atividade proposta no curso. Assim você consegue fixar bem o conteúdo do curso.

Muito obrigada por compartilhar com a gente o seu resultado.

Continue os bons estudos.

Um abraço.

por Bruno Henrique da Silva Bandeira
| 101k xp | 2 posts
Recepcionista

Amanda, tu ajudou muito! Eu fiz um pouco diferente mas me baseei na sua ideia. Também adicionei uma condicional pra quando o index + 1 for >= que o lenght do array ele volte pro índice 0. Segue minha solução abaixo:

const robo = document.querySelector("[data-robo]");

const coresRobo = ["Robotron-amarelo.png", "Robotron-azul.png", "Robotron-vermelho.png",
    "Robotron-rosa.png", "Robotron-preto.png", "Robotron-branco.png"];

robo.addEventListener("click", (evento) => {
    const corAtual = evento.target.src.split("/").pop();
    index = coresRobo.indexOf(corAtual);
    console.log(index);
    if (index + 1 >= coresRobo.length) {
        evento.target.src = `file:///D:/Estudos/FULLSTACK%20JS%20BOTICARIO/JavaScript%20manipulando%20o%20DOM/robotron-2000-projeto_inicial/cores/${coresRobo[0]}`;
    } else {
        evento.target.src = `file:///D:/Estudos/FULLSTACK%20JS%20BOTICARIO/JavaScript%20manipulando%20o%20DOM/robotron-2000-projeto_inicial/cores/${coresRobo[index + 1]}`;
    }
})

Vale ressaltar que no meu projeto a cor do Robotron começa no amarelo. Por isso ele é o primeiro do array.

por Amanda Lucio
| 71.4k xp | 24 posts

Aaa Bruno, que bom que ajudou!! Tamo junto!