Help with code reduction in If/Else

Asked

Viewed 81 times

-1

I am trying to clean the body class without having to put this amount of code in 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')
  }
javascript html if else

  • Marcelo, put the example code and add more information about what you are developing, so we can help you. Otherwise people are negatively questioning you. What language are you using? Are you using any framework? etc...

  • If body no longer has any class other than these, you can use the classname property. If you have more classes or if it is possible that in the future it will acquire more classes, you could use an object to map the event target value to the class you want to implement.

3 answers

0

Just remove all the classes and then add the one you want. It’s OK to try to remove a class that doesn’t exist.

But to turn the red value into red, blue into blue and yellow into Yellow, you will need to do an if, or a switch.

Or you can create an object and access the value of a key dynamically to retrieve the value, this way:

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)
}

  • You can do it too remove('blue', 'red', 'yellow')

0

To remove all classes of an element using Javascript only use the code below.

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

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

0

To avoid several if/else I used an object opcoes accessing its properties through a variable opcoes[variavel]. To complement we remove all CSS classes mapped to the object opcoes and add only the desired.

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>

Browser other questions tagged javascript html if else

You are not signed in. Login or sign up in order to post.