2

Eu estou tentando fazer um site onde o jogador pode calcular os status de seu personagem automaticamente para agilizar na hora da ficha,criação de personagem e não haver erros.

Então eu fiz o seguinte código (utilizando jQuery), dependendo do valor digitado, já calcula automaticamente o mod (modificador) e o rank da sua habilidade. Porém, eu não estou conseguindo fazer isso funcionar, só funciona o meu primeiro if() e apenas o Default que eu defini no switch(), eu gostaria de saber o motivo de não estar funcionando.

$('#str').on('input', function() {
  let modificador = $('.str-mod');
  let rank = $('.str-rank');

  if (this.value == '' || this.value <= 0) {
    rank.text('F');
    modificador.text('-10 ');
  } else {

    let modificadorStatusBase = -5;
    let modificadorBase = Math.floor(this.value / 2) + modificadorStatusBase;

    modificador.text((modificadorBase < 0 ? '' : '+') + modificadorBase + ' ');

    switch (this.value) {
      case this.value >= 4 && this.value <= 9:
        rank.text('D');
        break;
      case this.value >= 10 && this.value <= 15:
        rank.text('C');
        break;
      case this.value >= 16 && this.value <= 21:
        rank.text('B');
      default:
        rank.text('E');
        break;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-pontos">
  <fieldset>
    <legend>Status</legend>
    <form class="form-pontos">

      <div>
        <input type="text" nome="str" id="str" placeholder="Força" value="22" maxlength="3">
        <br>
        <label for="str">[
          <span class="str-mod">+6 </span>
          <span class="str-rank">A</span> ] Str (Força)
        </label>
      </div>
    </form>
  </fieldset>
</div>

https://jsfiddle.net/9obtwds1/1/

3 Respostas 3

9

Citando a resposta do stackoverflow inglês -> https://stackoverflow.com/a/2697105/10577440

O switch funciona comparando o que está no switch() com o que está em cada case:

switch (valor) {
    case 1: ....
    case 2: ....
    case 3: ....
}

Portanto não se pode ter lógica dentro dos case.

Um código como esse:

switch (valor) {
    case (valor >= 10 && valor <= 20): ...
}

é equivalente a esse:

if (valor === (valor >= 10 && valor <= 20)) ...

Nesse caso é recomendado usar if-else :)

1
  • 3
    Vale lembrar que, por não utilizar a comparação frouxa, mas sim ===, o resultado da expressão (valor === (valor >= 10 && valor <= 20)) jamais será verdadeira se o tipo de valor não for booleano. Na verdade, ela será válida apenas se valor = false, o que não faz sentido algum neste caso - o que explica sempre entrar no default quando utilizado switch(valor).
    – Woss
    Commented 23/04/2019 às 19:05
4

Seu switch está errado, para que possa usar um between no switch deve usar uma estrutura como essa:

switch (true) {
  case (this.value >= 4 && this.value <= 9):
    rank.text('D');
    break;
  case (this.value >= 10 && this.value <= 15):
    rank.text('C');
    break;
  case (this.value >= 16 && this.value <= 21):
    rank.text('B');
  default:
    rank.text('E');
    break;
}

Ou simplesmente um if/else:

if (this.value >= 4 && this.value <= 9) {
  rank.text('D');
} else if (this.value >= 10 && this.value <= 15) {
  rank.text('C');
} ...

Como muito bem lembrado pelo AndersonCarlosWoss nos comentários: "se existe a condição value <= 9, não será necessário fazer a comparação value >= 10 posteriormente, dado que a condição anterior já garante que o valor é maior que 9". Logo é possível criar uma estrutura como essa:

switch (true) {
  case (this.value <= 3):
    rank.text('E');
    break;
  case (this.value <= 9):
    rank.text('D');
    break;
  case (this.value <= 15):
    rank.text('C');
    break;
  case (this.value <= 21):
    rank.text('B');
    break;
  default:
    rank.text('E');
    break;
}

Ou, com if/else

if (this.value <= 3) {
  rank.text('E');
} else if (this.value <= 9) {
  rank.text('D');
} else if (this.value <= 15) {
  rank.text('C');
} ...
6
  • 4
    Nesse caso eu usaria if/else if. Pra que um switch em cima de nada?
    – bfavaretto
    Commented 23/04/2019 às 17:33
  • @bfavaretto concordo, mas se o perguntador quer usar o switch, seja porque está estudando ou porque acha mais legível, essa é a forma
    – Costamilam
    Commented 23/04/2019 às 17:34
  • 1
    O operador switch é para comparar igualdades. Internamente ele utiliza o comparador ===. O correto é usar a estrutura lógica if else para resolver o problema. Commented 23/04/2019 às 17:36
  • 1
    @VictorCarnaval na minha resposta ele compara true com o resultado da comparação de cada caso, é um modo de se usar o switch para esse fim
    – Costamilam
    Commented 23/04/2019 às 17:39
  • 2
    Só lembrando que em muitos casos as condições podem ser simplificadas. Por exemplo, se existe a condição value <= 9, não será necessário fazer a comparação value >= 10 posteriormente, dado que a condição anterior já garante que o valor é maior que 9.
    – Woss
    Commented 23/04/2019 às 17:52
1

Realmente usar um switch acho desnecessário nesse caso. Você pode fazer uma sequência de if else e por último um else (quando nenhuma das condições dos if else anteriores foram atendidas). Inclusive pode simplificar o código, fazendo as alterações nos textos no final, tudo de uma vez.

Pode guardar o valor do campo numa variável, sem precisar repetir this.value diversas vezes:

let val = parseInt(this.value.trim());

Primeiro eliminei espaços nas bordas com .trim(). Isso significa que se for digitado apenas espaços no campo, o valor será vazio. Depois converti para número inteiro com parseInt(), para que ele converta o valor em número em vez de string. Isso faz diferença no 0, porque 0 tipo número é diferente de 0 tipo string, que será usado no if.

O código ficaria assim:

$('#str').on('input', function() {

   let modificador = $('.str-mod');
   let rank = $('.str-rank');
   let val = parseInt(this.value.trim());
   var rtxt, mtxt;
   
   if (!val || isNaN(val) || val < 0) {
      rtxt = 'F';
      mtxt = '-10 ';
   } else if (val >= 4 && val <=9) {
      rtxt = 'D';
   } else if (val >= 10 && val <= 15) {
      rtxt = 'C';
   } else if (val >= 16 && val <= 21) {
      rtxt = 'B';
   } else {
      rtxt = 'E';
   }

   if(rtxt != "F"){
      let modificadorStatusBase = -5;
      let modificadorBase = Math.floor(val / 2) + modificadorStatusBase;
      mtxt = (modificadorBase < 0 ? '' : '+') + modificadorBase + ' ';
   }
   
   rank.text(rtxt);
   modificador.text(mtxt);
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-pontos">
  <fieldset>
    <legend>Status</legend>
    <form class="form-pontos">

      <div>
        <input type="text" nome="str" id="str" placeholder="Força" value="22" maxlength="3">
        <br>
        <label for="str">[
          <span class="str-mod">+6 </span>
          <span class="str-rank">A</span> ] Str (Força)
        </label>
      </div>
    </form>
  </fieldset>
</div>

No primeiro if:

if (!val || isNaN(val) || val < 0) {

verifica:

!val       -> se o valor é vazio ou igual a 0
isNaN(val) -> não é um número (no caso de se digitar algo que não seja número)
val < 0    -> se for um número negativo

Após os if else coloquei mais um if:

if(rtxt != "F"){

Como apenas a primeira condição do primeiro if modifica o texto do elemento da variável modificador de forma diferente das outras condições, eu verifiquei se o valor da variável rtxt (que será o texto do elemento da variável rank) é diferente de F.

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 .