Entrar Ainda não tem acesso?
1
resposta

[Projeto] Minha solução

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

por Sergio Ferreira Da Silveira Filho
| 39.6k xp | 7 posts
. 
HTML :
                <div>
                    <button data-cores="amarelo">Cor amarelo</button>
                    <button data-cores="azul">cor azul</button>
                    <button data-cores="preto">cor preto</button>
                    <button data-cores="rosa">cor rosa</button>
                </div>

JavaScript :

const coresRobo = document.querySelectorAll("[data-cores]")
const robo = document.querySelector("[data-robo]")

const valorDasCores = {
    "amarelo": {
        src: "../img/Robotron 2000 - Amarelo/robotron.png"
    },
    "azul": {
        src: "../img/Robotron 2000 - azul/robotron.png"
    },
    "preto": {
        src: "../img/Robotron 2000 - preto/robotron.png"
    },
    "rosa": {
        src: "../img/Robotron 2000 - rosa/robotron.png"
    }
}

coresRobo.forEach((elemento) => {
    elemento.addEventListener('click', (evento) => {
        evento.preventDefault();
        if (elemento.dataset.cores == 'amarelo') {
            robo.src = "../img/Robotron 2000 - Amarelo/robotron.png"
        }
        if (elemento.dataset.cores == 'azul') {
            robo.src = "../img/Robotron 2000 - Azul/robotron.png"
        }
        if (elemento.dataset.cores == 'preto') {
            robo.src = "../img/Robotron 2000 - Preto/robotron.png"
        }
        if (elemento.dataset.cores == 'rosa') {
            robo.src = "../img/Robotron 2000 - Rosa/robotron.png"
        }
    })
})

Ainda estou entendendo mais sobre como não repetir codigo, porém esse foi como eu consegui pensar e solucionar o problema, ficaria muito agradecido se você que entendeu mais sobre como não repetir o codigo, conseguisse me explicar de forma diferente, pois estou buscando aprender essa parte, mesmo o codigo funcionando sei que essas repetições de IF não são boas praticas.

1 resposta
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Opa Sergio, tudo bem?

Que bom que conseguiu solucionar este desafio! Parabéns pela iniciativa de criar uma solução utilizando Javascript para manipular o DOM.

Você está no caminho certo! Porém, para podermos deixar o código mais enxuto, podemos reduzir as condições e alterar a referência da imagem de uma só vez. Uma forma de fazermos isso é utilizar um template string, que são strings usadas para conter valores de variáveis ou expressões diretamente na string, sem precisar concatenar.

Dessa forma usaremos a mesma estrutura de source da imagem, mas alteraremos somente a palavra que altera a imagem, mudaremos por meio do dataset definido para o botão para a cor que quisermos.

Para isso recomendo o seguinte código:

robo.src = `img/Robotron 2000 - ${elemento.dataset.cores}.png`;
  • Usamos a sintaxe ${} para referenciar os valores que queremos usar, nesse caso pegaremos do elemento clicado (botão) o dataset das cores. Por exemplo, quando clicarmos no botão “Cor Amarelo” , o ${} substituíra o o source do robô com o data-cores “Amarelo”.

Segue o código final:

HTML:

<div>
        <button data-cores="Amarelo">Cor amarelo</button>
        <button data-cores="Azul">cor azul</button>
        <button data-cores="Preto">cor preto</button>
        <button data-cores="Rosa">cor rosa</button>
</div>

Javascript:

const coresRobo = document.querySelectorAll("[data-cores]")
const robo = document.querySelector("[data-robo]")

coresRobo.forEach((botao) => {
    elemento.addEventListener("click", (evento) => {
        evento.preventDefault();
        robo.src = `img/Robotron 2000 - ${elemento.dataset.cores}.png`;
    });

});

Recomendo caso queira aprender mais sobre os template strings o seguinte artigo:

Caso tenha dúvidas, fico à disposição para tirar dúvidas.

Desejo um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!