Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dificuldade com função para mudar cor do Robotron

Referente ao curso JavaScript: manipulando o DOM

por Letícia Ferreira Da Silva Cruz De Lima
| 151.9k xp | 14 posts
Professora de reforço

Olá pessoal, estou tentando fazer o desafio de mudar a cor do robotron ao clicar nos botões contendo as opções. Eu esperava que a função retornasse o src da imagem atualizado, tipo "img/robotron-cor.png", mas está retornando "img/robotron-undefined.png". Se alguém puder dar uma luz aqui :)

Erro Not Found

HTML

<footer>
            <div class="cores-robo">
            <div class="cores-robo-titulo">Escolha a cor do seu robotron</div>
                <button class="cores-robo-botao" data-cor="azul"><img src="img/robotron-azul.png" alt="" class="cores-robo-img" ></button>
                <button class="cores-robo-botao" data-cor="amarelo"><img src="img/robotron-amarelo.png" alt="" class="cores-robo-img"></button>
                <button class="cores-robo-botao" data-cor="branco"><img src="img/robotron-branco.png" alt="" class="cores-robo-img"></button>
                <button class="cores-robo-botao" data-cor="rosa"><img src="img/robotron-rosa.png" alt="" class="cores-robo-img"></button>
                <button class="cores-robo-botao" data-cor="preto"><img src="img/robotron-preto.png" alt="" class="cores-robo-img"></button>
                <button class="cores-robo-botao" data-cor="vermelho"><img src="img/robotron-vermelho.png" alt="" class="cores-robo-img"></button>  
        </div>
        </footer>

Script 

const cores = document.querySelectorAll("[data-cor]");
const imagem = document.querySelector('.robo');

cores.forEach((elemento) => {
    elemento.addEventListener('click', (evento) => {
        mudaCor(evento.target.dataset.cor)


    }) 
})

function mudaCor (corAtual) {
    imagem.setAttribute('src', `img/robotron-${corAtual}.png`)
}
4 respostas
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Letícia, tudo bem?

Ao testar o seu código vi que ele está funcionando corretamente. O problema pode estar relacionado ao caminho das imagens que você está utilizando na função mudaCor(corAtual). Para que eu possa simular o seu problema e te ajudar de forma mais assertiva, peço que você compartilhe o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto.

Fico no aguardo!

por Letícia Ferreira Da Silva Cruz De Lima
| 151.9k xp | 14 posts
Professora de reforço

Olá, Rodrigo. Tudo bem e você? Segue o repositório: https://github.com/LeticiaFerreiraLima/projeto-robotron.git

Muito obrigada pelo retorno, vou dar uma olhada nisso também.

por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Letícia, estou bem também, obrigado!

Muito obrigado por compartilhar o seu código. Ao realizar os testes usando como base o seu código, percebi que ao tentar trocar a cor do robô o retorno era undefined. Isso ocorre porque o valor do atributo "data-cor" não seria acessível através do objeto evento.target quando o data-attribute está atribuído na tag <button>.

Podemos resolver esse problema alterando a posição do data-cor para dentro da tag <img>. Dessa forma, o comando funcionaria adequadamente e retornaria o caminho do arquivo contendo a cor clicada.

O código alterado ficaria assim:

<footer>
    <div class="cores-robo">
        <div class="cores-robo-titulo">Escolha a cor do seu robotron</div>
        <button class="cores-robo-botao" ><img src="img/robotron-azul.png" alt="" class="cores-robo-img" data-cor="azul" ></button>
        <button class="cores-robo-botao"><img src="img/robotron-amarelo.png" alt="" class="cores-robo-img" data-cor="amarelo"></button>
        <button class="cores-robo-botao" ><img src="img/robotron-branco.png" alt="" class="cores-robo-img" data-cor="branco"></button>
        <button class="cores-robo-botao" ><img src="img/robotron-rosa.png" alt="" class="cores-robo-img" data-cor="rosa"></button>
        <button class="cores-robo-botao" ><img src="img/robotron-preto.png" alt="" class="cores-robo-img" data-cor="preto"></button>
        <button class="cores-robo-botao"><img src="img/robotron-vermelho.png" alt="" class="cores-robo-img"  data-cor="vermelho"></button>  
    </div>
</footer>

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!
por Letícia Ferreira Da Silva Cruz De Lima
| 151.9k xp | 14 posts
Professora de reforço

Boa tarde, Rodrigo, tudo bem? Muito obrigada pelo feedback. Fiz a correção no código e deu certo! Já subi para o Github a versão atualizada. Obrigada, abraços.