Distribution of points in html

Asked

Viewed 51 times

0

I made this code here:

<div class="snippet">
  <p>Habilidades:</p>

  <div>
    <label for="Passe">Passe</label>
  </div>
  <input type="range" id="start" name="Passe" min="0" max="11">

  <div>
    <label for="Drible">Drible</label>
  </div>
  <input type="range" id="Drible" name="Drible" min="0" max="100" value="90" step="10">

  <div>
    <label for="Marcação">Marcação</label>
  </div>
  <input type="range" id="Marcação" name="Marcação" min="0" max="100" value="90" step="10">

  <div>
    <label for="Finalização">Finalização</label>
  </div>
  <input type="range" id="Finalização" name="Finalização" min="0" max="100" value="90" step="10">

  <div>
    <label for="Cabeceio">Cabeceio</label>
  </div>
  <input type="range" id="Cabeceio" name="Cabeceio" min="0" max="100" value="90" step="10">

  <div>
    <label for="Cruzamento">Cruzamento</label>
  </div>
  <input type="range" id="Cruzamento" name="Cruzamento" min="0" max="100" value="90" step="10">

  <div>
    <label for="Bola Parada">Bola Parada</label>
  </div>
  <input type="range" id="Bola Parada" name="Bola Parada" min="0" max="100" value="90" step="10">
  <div>
    <label for="Domínio">Domínio</label>
  </div>
  <input type="range" id="Domínio" name="Domínio" min="0" max="100" value="90" step="10">

  <div>
    <label for="Condução">Condução</label>
  </div>
  <input type="range" id="Condução" name="Condução" min="0" max="100" value="90" step="10">

  <div>
    <label for="Força">Força</label>
  </div>
  <input type="range" id="Força" name="Força" min="0" max="100" value="90" step="10">

  <div>
    <label for="Resistência">Resistência</label>
  </div>
  <input type="range" id="Resistência" name="Resistência" min="0" max="100" value="90" step="10">

  <div>
    <label for="Velocidade">Velocidade</label>
  </div>
  <input type="range" id="Velocidade" name="Velocidade" min="0" max="100" value="90" step="10">

  <div>
    <label for="Explosão">Explosão</label>
  </div>
  <input type="range" id="Explosão" name="Explosão" min="0" max="100" value="90" step="10">

  <div>
    <label for="Posicionamento">Posicionamento</label>
  </div>
  <input type="range" id="Posicionamento" name="Posicionamento" min="0" max="100" value="90" step="10">

  <div>
    <label for="Liderança">Liderança</label>
  </div>
  <input type="range" id="Liderança" name="Liderança" min="0" max="100" value="90" step="10">

  <div>
    <label for="Espírito de Equipe">Espírito de Equipe</label>
  </div>
  <input type="range" id="Espírito de Equipe" name="Espírito de Equipe" min="0" max="100" value="90" step="10">
</div>

and wanted to know how do I distribute points, wanted to give the client 80 points that would be distributed between these categories

php html

  • Just use Javascript, add the current quantities to the additional 80 and set the result as the maximum of the sum of the distributed attributes. In your example it starts with 1356 points already distributed, adding up the 80 points it will have available 1436 points, so you allow it to do the distribution while the sum does not pass this value. Want to try?

  • If the label and input are connected it is better they stay within the same div

  • @Viniciusfernandes Why?

  • @Andersoncarloswoss in this code is no big deal, but it’s always good to keep the semantics and structuring form of html, and in the future it facilitates styling with css or even if you want to use a bootstrap

  • 1

    @Viniciusfernandes I will have to disagree. I don’t see how that hurts the semantics and leaving them apart is maybe just to facilitate stylization today. But since that’s not part of the scope of the question, if you want to talk some more chat.

  • @Andersoncarloswoss opa, how would I do that friend? can help me?

  • Your code has errors also: a id cannot have spaces. Another thing, try to use simple id’s without accents. For example, instead of id="Marcação", use id="marcacao". In the case of id="Espírito de Equipe", could use id="espirito_de_equipe", or id="EspiritoDeEquipe", or id="espiritodeequipe".. remembering that CSS and Javascript are case sensitive (differentiate between upper and lower case). Obs.: The name the same thing.

  • thanks I’m new in the business, I’m using javascript to make the limitation

Show 3 more comments

1 answer

0


I think I got it and I gave it an upgrade to see if it gives you an idea, the logic is very simple but I hit my head a little bit.

<div class="snippet">
    <p>Habilidades:</p>

    <div>
        <label for="Passe">Passe</label>
        <input type="range" class="habilidades" id="start" name="Passe" min="0" max="11" value="0">
        <input type="number" id="showstart" readonly="">
    </div>

    <div>
        <label for="Drible">Drible</label>
        <input type="range" class="habilidades" id="Drible" name="Drible" min="0" max="100" value="0" step="10">
        <input type="number" id="showDrible" readonly="">
    </div>

    <div>
        <label for="Marcação">Marcação</label>
        <input type="range" class="habilidades" id="Marcação" name="Marcação" min="0" max="100" value="0" step="10">
        <input type="number" id="showMarcação" readonly="">
    </div>

    <div>
        <label for="Finalização">Finalização</label>
        <input type="range" class="habilidades" id="Finalização" name="Finalização" min="0" max="100" value="0" step="10">
        <input type="number" id="showFinalização" readonly="">
    </div>

    <div>
        <label for="Cabeceio">Cabeceio</label>
        <input type="range" class="habilidades" id="Cabeceio" name="Cabeceio" min="0" max="100" value="0" step="10">
        <input type="number" id="showCabeceio" readonly="">
    </div>

    <div>
        <label for="Cruzamento">Cruzamento</label>
        <input type="range" class="habilidades" id="Cruzamento" name="Cruzamento" min="0" max="100" value="0" step="10">
        <input type="number" id="showCruzamento" readonly="">
    </div>

    <div>
        <label for="Bola Parada">Bola Parada</label>
        <input type="range" class="habilidades" id="Bola-Parada" name="Bola Parada" min="0" max="100" value="0" step="10">
        <input type="number" id="showBola-Parada" readonly="">
    </div>
    <div>
        <label for="Domínio">Domínio</label>
        <input type="range" class="habilidades" id="Domínio" name="Domínio" min="0" max="100" value="0" step="10">
        <input type="number" id="showDomínio" readonly="">
    </div>

    <div>
        <label for="Condução">Condução</label>
        <input type="range" class="habilidades" id="Condução" name="Condução" min="0" max="100" value="0" step="10">
        <input type="number" id="showCondução" readonly="">
    </div>

    <div>
        <label for="Força">Força</label>
        <input type="range" class="habilidades" id="Força" name="Força" min="0" max="100" value="0" step="10">
        <input type="number" id="showForça" readonly="">
    </div>

    <div>
        <label for="Resistência">Resistência</label>
        <input type="range" class="habilidades" id="Resistência" name="Resistência" min="0" max="100" value="0" step="10">
        <input type="number" id="showResistência" readonly="">
    </div>

    <div>
        <label for="Velocidade">Velocidade</label>
        <input type="range" class="habilidades" id="Velocidade" name="Velocidade" min="0" max="100" value="0" step="10">
        <input type="number" id="showVelocidade" readonly="">
    </div>

    <div>
        <label for="Explosão">Explosão</label>
        <input type="range" class="habilidades" id="Explosão" name="Explosão" min="0" max="100" value="0" step="10">
        <input type="number" id="showExplosão" readonly="">
    </div>

    <div>
        <label for="Posicionamento">Posicionamento</label>
        <input type="range" class="habilidades" id="Posicionamento" name="Posicionamento" min="0" max="100" value="0" step="10">
        <input type="number" id="showPosicionamento" readonly="">
    </div>

    <div>
        <label for="Liderança">Liderança</label>
        <input type="range" class="habilidades" id="Liderança" name="Liderança" min="0" max="100" value="0" step="10">
        <input type="number" id="showLiderança" readonly="">
    </div>

    <div>
        <label for="Espírito de Equipe">Espírito de Equipe</label>
        <input type="range" class="habilidades" id="Espirito-de-Equipe" name="Espirito-de-Equipe" min="0" max="100" value="0" step="10">
        <input type="number" id="showEspirito-de-Equipe" readonly="">
    </div>
</div>
<div id="teste"></div>


<script type="text/javascript">
    $(document).ready(function(){
        $(".habilidades").val(0);
    });
    var limite = 80;
    var total = 0;
    $(".habilidades").change(function() {
        total = 0;
        $("#show"+$(this).attr('id')).val($(this).val());
        $(".habilidades").each(function(){
            total = total + parseInt($(this).val());
            $("#teste").empty();
            $("#teste").append(total);
        });
        if(total > limite){
            alert("Você passou do limite de:" + limite);
        }
    });
</script>

Any doubt, just comment. I hope I’ve helped!

  • If you want to put the code inside the tag <head></head> place the whole block with JS inside the $(document).ready. and if the answer is correct mark the answered.

  • opa mano, how do I integrate this your code to page?

  • What do you mean? It’s just copy and paste.

  • I’ve got it, buddy, I’ve got it

Browser other questions tagged php html

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