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>
-
Cores aleatórias ou predefinidas?– Valdeir Psr14/05/2018 às 2:07
-
predefinidas verde e amarelo, quando não estiver em uma cor tem que estar na outra– Bruna14/05/2018 às 2:08
2 Respostas
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.
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>