-1

Estou tentando limpar a classe do body sem ter que colocar essa quantidade de código no if/else

function bgColor(event) {
  evento = event.target


  if (evento.classList.value == 'vermelho') {
    body.classList.remove('blue')
    body.classList.remove('yellow')
    body.classList.add('red')


  }
  else if (evento.classList.value == 'azul') {
    body.classList.add('blue')
    body.classList.remove('red')
    body.classList.remove('yellow')

  }
  else {
    body.classList.add('yellow')
    body.classList.remove('red')
    body.classList.remove('blue')
  }
2
  • Marcelo, coloque o código de exemplo e adicione mais informações sobre o que está desenvolvendo, para que possamos te ajudar. Senão o pessoal fica negativando sua pergunta. Qual linguagem está usando? Está usando algum framework? etc... Commented 18/08/2020 às 18:04
  • Se body não tiver mais nenhuma classe a não ser essas, você pode usar a propriedade className. Se tiver mais classes ou se for possível que no futuro ele venha a adquirir mais classes daria para usar um objeto para mapear o valor do alvo do evento a classe que você quer implementar.
    – user201467
    Commented 18/08/2020 às 18:21

3 Respostas 3

0

Basta remover todas as classes e depois adicionar a que você quer. Não tem problema tentar remover uma classe que não existe.

Mas para transformar o valor vermelho em red, azul em blue e amarelo em yellow, você vai precisar fazer um if, ou um switch.

Ou ainda você pode criar um objeto e acessar o valor de uma chave dinamicamente para recuperar o valor, dessa forma:

function bgColor(event) {    
    body.classList.remove('blue')
    body.classList.remove('red')
    body.classList.remove('yellow')

    var corDaClasse = {
        vermelho: 'red',
        azul: 'blue',
        amarelo: 'yellow',
    }[event.target.classList.value]

    body.classList.add(corDaClasse)
}
1
  • Também dá pra fazer remove('blue', 'red', 'yellow')
    – hkotsubo
    Commented 18/08/2020 às 20:25
0

Para remover todas as classes de um elemento usando somente o JavaScript use o código abaixo.

document.querySelector('button').onclick = function() {
  this.className = '';
}
.primeira {
  border-color:red;
}

.segunda {
  color:green;
}
<button id="button" class="primeira segunda">Clicar Aqui</button>

0

Para evitar vários if/else utilizei um objeto opcoes acessando suas propriedades através de uma variável opcoes[variavel]. Para complementar removemos todas as classes CSS mapeadas no objeto opcoes e adicionamos apenas a desejada.

function bgColor() {
    const opcoes = {
        vermelho: 'red',
        azul: 'blue',
        yellow: 'yellow'
    };

    document.body.classList.remove(...Object.values(opcoes));
    document.body.classList.add(
        opcoes[event.target.classList.value]
    );
}

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
        bgColor();
    });
}
.red {
    background: red;
}

.yellow {
    background: yellow;
}

.blue {
    background: blue;
}
<button class="vermelho">Vermelho</button>
<button class="azul">Azul</button>
<button class="yellow">Yellow</button>

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 .