-1

Preciso criar um evento para que os botões façam uma div alternar entre duas cores ao clicar, consegui fazer utilizando o math pra randomizar cores, mas dessa forma com duas cores fixas to tendo dificuldade, a base do código que tenho agora é essa.

como estou aprendendo, se possivel não me mandem o código pronto, mas sim a ideia por trás dele, de qualquer forma qualquer ajuda é bem vinda

<div id="cor">
  <button id="trocaCor">Pintar</button>
</div>
<style>
  #cor {
    background-color: #ffbc02;
    width: 100px;
    height: 100px;
  }
</style>
<script>
  let cores = ["#ffbc02", "#00ff15"]

3 Respostas 3

-1

Vou deixar alguns exemplos de algumas formas que pode fazer, também logo no final deixei alguns links uteis de algumas coisas utilizadas pra vc ver mais do assunto de cada uma se desejar.

A primeira é baseada no código postado na pergunta com apenas 2 cores e é bem simples, basta vc criar uma variável controladora do tipo true/false e setar a cor conforme a condição da variável:

const cores = ["#ffbc02", "#00ff15"];
let controle = true;

trocaCor.addEventListener('click', () => {
  cor.style.backgroundColor = cores[1];  // segundo valor do array
  controle = !controle;   // nega o valor - se verdadeiro vira falso e vice e versa
  
  if(controle) cor.style.backgroundColor = cores[0];  // se true, primeira cor
  else cor.style.backgroundColor = cores[1];
})
#cor {
  background-color: #ffbc02;
  width: 100px;
  height: 100px;
}
<div id="cor">
  <button id="trocaCor">Pintar</button>
</div>

A segunda é caso tenha vários valores no array de cores, neste caso criei uma variavel controladora do tipo numérica para controlar as posições do array de cores:

const cores = ["#ffbc02", "#00ff15", "#553345", "#aabbcc", "#ff45bd"];
let controle = 0;

trocaCor.addEventListener('click', () => {
  controle++;  // adiciona mais 1 a cada clique no botão
  cor.style.background = cores[controle];  // a posição no array é o valor da variável
})
#cor {
  background-color: #ffbc02;
  width: 100px;
  height: 100px;
}
<div id="cor">
  <button id="trocaCor">Pintar</button>
</div>

A terceira é para caso tenha várias cores e queira voltar para o começo do array parecido com um carousel:

const cores = ["#ffbc02", "#00ff15", "#553345", "#aabbcc", "#ff45bd"];
let controle = 0;

trocaCor.addEventListener('click', () => {
  controle++;
  
  if (controle > cores.length - 1) controle = 0;  // aqui zera a contagem e volta do começo
  
  cor.style.background = cores[controle];
})
#cor {
  background-color: #ffbc02;
  width: 100px;
  height: 100px;
}
<div id="cor">
  <button id="trocaCor">Pintar</button>
</div>

Alguns links para aprofundamento:

2
  • Obrigado pela ajuda! antes de postar eu havia feito como o seu terceiro exemplo, porém não estava conseguindo fazer zerar a contagem
    – lew0w
    Commented 30/09/2022 às 21:03
  • Jóia man, sucesso aí!
    – LeAndrade
    Commented 30/09/2022 às 21:36
-1

Eu faria uma classe contendo a cor secundária e faria uma log

const colorDiv = document.getElementById('cor');
const colorButton = document.getElementById('trocaCor');

function changeColor() {
  const hasSecondColor = colorDiv.classList.contains('second');
  if (hasSecondColor) {
    colorDiv.classList.remove('second')
  } else {
    colorDiv.classList.add('second')
  }
}
#cor {
    background-color: #ffbc02;
    width: 100px;
    height: 100px;
 }

#cor.second {
  background-color: #00ff15;
}
<div id="cor">
  <button id="trocaCor" onclick="changeColor()">Pintar</button>
</div>

-2

Olá, Separei minha solução em alguns passos simples, para que possa entender melhor. 1 - Utilizar o atributo "onclick" no botão para que chame a função "trocaCor()" ao ser clicado.

2 - Dentro da função, primeiro deve-se pegar o elemento que deseja alterar o estilo. no caso utilizei o "querySelector", e selecionei pelo ID. Ficando "document.querySelector("#cor")". Atribuí à variável "button"

3 - Após pegar o atributo, criei uma lógica com if-else para que a função identifique qual cor está setada, e troque-a. No caso, criei uma variável fora da função (se criar dentro da função, toda vez que for chamada, irá atribuir novamente o valor inicial, quebrando a lógica) e atribuí um valor booleano para ela, iniciando com "true"(nome da variável: alternaCor).

4- Em seguida, utilizei as propriedades ".style" e ".backgroundColor" para alterar a cor de fundo do elemento selecionado no passo 2. Ficando "button.style.backgroundColor = '#ffbc02'

5 - Após alterar a cor de fundo, alterei a variável booleana "alternaCor" para o valor inverso, para que, no próximo clique, a cor seja alterada novamente.

OBS: Abaixo está anexo meu código, para caso tenha alguma dúvida ou queira conferir. Espero ter ajudado!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cor {
            background-color: #ffbc02;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="cor">
        <button id="trocaCor" onclick='trocaCor()'>Pintar</button>
    </div>
    
    <script type="text/javascript">

        let alternarCor = true

        function trocaCor() {
        
            let button = document.querySelector('#cor')

            if (alternarCor) {
                button.style.backgroundColor = '#ffbc02'
                alternarCor = false
            } else if(!alternarCor) {
                button.style.backgroundColor = '#00ff15'
                alternarCor = true
            }
        }
        
    </script>
</body>
</html>

2
  • Cara, show de bola, cai no problema da variavel dentro da função kkk mas depois de uns52 minutos mexendo e tentando entender, consegui corrigir o código e agora ta rodando 100%, mto obrigado pela explicação detalhada!
    – lew0w
    Commented 30/09/2022 às 21:00
  • Boa mano, é isso ai! Commented 2/10/2022 às 12:33

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .