Kendel Ventonda Kendel Ventonda - 3 months ago 15
Javascript Question

Summing Int of Range and blocking Range when maximum is reached

So I'm trying a script for a character generator of a RPG and want people to set their stats. These stats can go from 1 to 10 each. The user uses regular HTML ranges to set them. I'm summing these up until the user reaches 18 points overall. The issue here is, that I don't know how to stop the the rages to go up when 18 points are hit.
I'm summing the stats up like this:

<fieldset id="attribute" oninput="streight.value=parseInt(staerke.value);wisdom.value=parseInt(weisheit.value);agility.value=parseInt(geschick.value);APWert.value=parseInt(staerke.value)+parseInt(weisheit.value)+parseInt(geschick.value)+' / 36'">
<legend>Attribute</legend>
<label for="staerke">Stärke</label>
<input type="range" id="staerke" value="1" min="1" max="10">
<output name="streight" for="staerke">1</output>

<label for="weisheit">Weisheit</label>
<input type="range" id="weisheit" value="1" min="1" max="10">
<output name="wisdom" for="weisheit">1</output>

<label for="geschick">Geschick</label>
<input type="range" id="geschick" value="1" min="1" max="10">
<output name="agility" for="geschick">1</output>

<output name="APWert" id="APWert" for="ap">3 / 18</output>
</fieldset>


This is counting the values of the range-inputs, summing them up and showing them in the output without a page reload. But I have no idea how to stop the range-inputs when the maximum of 18 is reached.
I'd be really thankful for any kind of help.

Answer

You could do something were the validation runs each time the input of any of the three inputs is changed. It would look something like this:

In HTML

<input type="range" id="staerke" value="1" min="1" max="10" onchange ="value_changed()">
<input type="range" id="weisheit" value="1" min="1" max="10" onchange ="value_changed()">
<input type="range" id="geschick" value="1" min="1" max="10" onchange ="value_changed()">

In JS

function value_changed(){
   //pull in the three values
   var staerke_value = parseInt($("#staerke").val());
   var weisheit_value = parseInt($("#weisheit").val());
   var geschick_value = parseInt($("#geschick").val());

   if((staerke_value + weisheit_value + geschick_value ) > 18 ){
     //if you are out of the range alert the user
     alert("you messed up!");
   }
}
Comments