4
function Selecionar(){
    var selecionado = document.getElementById("poltronas");
    selecionado.style.background = "yellow";

    var selecionado = document.getElementById("poltronas");
    selecionado.style.background = "green";
}

<a href="#" onclick="Selecionar()"><div id="poltronas">1</div></a>
2
  • Cores aleatórias ou predefinidas? 14/05/2018 às 2:07
  • predefinidas verde e amarelo, quando não estiver em uma cor tem que estar na outra
    – Bruna
    14/05/2018 às 2:08

2 Respostas 2

1

Um jeito simples é verificar a cor atual e mudar com base nela. O código fica próximo do seu atual:

function Selecionar(){
    var selecionado = document.getElementById("poltronas");

    // Se estiver amarelo, troca pra verde
    if(selecionado.style.background === "yellow") {
        selecionado.style.background = "green";

    // Senão, troca pra amarelo
    } else {
        selecionado.style.background = "yellow";
    }
}

Isso irá funcionar se a cor inicial estiver definida como amarelo, por JS ou estilo inline:

<div id="poltronas" style="background: yellow"></div>

Sem isso a cor inicial seria indefinida do ponto de vista desse script, e o primeiro clique definiria amarelo. A partir daí funcionaria normalmente.

1
  • Funcionou perfeitamente, muito obrigada
    – Bruna
    14/05/2018 às 2:46
1

Caso possuas mais de duas cores, tu podes utilizar um array para armazenar os valores e depois ir alterando conforme a quantidade de clique.

Exemplo comentado:

/* Define as cores */
const cores = ["yellow", "green", "red", "orange"]

/* Define a posição da cor atual */
let corIndex = 0;

/* Elemento que irá sofrer as alterações */
const poltrona = document.getElementById("poltronas");

function Selecionar(){
  /**
   * Verifica se é uma cor válida
   * Caso não seja, atribui o índice 0
   */
  if (!cores[corIndex]) {
    corIndex = 0
  }
  
  /* Altera a cor e muda o índice para a próxima */
  poltrona.style.setProperty("background", cores[corIndex++])
}
#poltronas {
  height: 100px;
  width: 100px
}
<a href="#" onclick="Selecionar()">Mudar de cor</a>

<div id="poltronas"></div>

1
  • isso ira me ajudar muito daqui para frente, muito obrigada
    – Bruna
    14/05/2018 às 2:47

Você deve fazer log-in para responder a esta pergunta.

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