Is it possible to ensure a User's input doesn't exceed a specific range in JavaScript?

Question

So I currently have a set up where there are input boxes that take numbers. The range is 0-100. I want to keep the value within that range, so if it's set to like, 200, it just caps at 100, or 0 in the case of a negative number.

I figure it'd be possible with an if statement. But the only way I see it working is through multiple if/else if statements. So I'm wondering if there's some other method to accomplish the goal.

Can view the current thing here

My code:

function updateStats() {
  var hp = document.getElementById("hpValue").value;
  var mp = document.getElementById("mpValue").value;
  var strength = document.getElementById("strengthValue").value;
  var defense = document.getElementById("defenseValue").value;
  var speed = document.getElementById("speedValue").value;
  var luck = document.getElementById("luckValue").value;

  document.getElementById("hpBar").style.width = hp + "%";
  document.getElementById("mpBar").style.width = mp + "%";
  document.getElementById("strBar").style.width = strength + "%";
  document.getElementById("defBar").style.width = defense + "%";
  document.getElementById("speedBar").style.width = speed + "%";
  document.getElementById("luckBar").style.width = luck + "%";

}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

.statbarsBG {
  background-color: #808080;
  text-align: left;
  height: 20px;
  width: 350px;
  -webkit-appearance: none;
  border: none;
  font-weight: bold;
  /* Set the progressbar to relative */
  position: relative;
}

.statbarsHP {
  background-color: green;
  height: 20px;
}

.statbarsMP {
  background-color: purple;
  height: 20px;
}

.statbarsSTR {
  background-color: red;
  height: 20px;
}

.statbarsDEF {
  background-color: darkblue;
  height: 20px;
}

.statbarsSPD {
  background-color: powderblue;
  height: 20px;
}

.statbarsLUCK {
  background-color: khaki;
  height: 20px;
}

input:invalid {
  border: 3px solid red;
}

Character Rank: B


  
    Stat
     Level
     Value (Between 0-100)
  
  

    HP
    
      
        
    
      
  
  

    MP
    
      
        

        
      
      
    

      
  
  

    STR 
    
      
        
    
      
  

  

    DEF 
    
      
        
    
      
  

  

    SPEED 
    
      
        
    
      
  

  

    LUCK

user_7341585 · Answer

Use . And to set the range you can use the attributes min and max.

So for example:

To prevent users from typing in a value higher than the max or lower than the min you can use this script:

function checkMinMax(event) {
var value = this.value,
    min = this.getAttribute('min'),
    max = this.getAttribute('max');

if(value < min)
    this.value = min;
else if(value > max)
    this.value = max;
}

window.addEventListener('load', function() {
    document.getElementById('yourinput').addEventListener('keyup', checkMinMax);
});

user_1352288 · Answer

First of all, let's clear up a lot of that repetition.

const map = {
    hpValue: 'hpBar',
    mpValue: 'mpBar',
    strengthValue: 'strBar',
    defenseValue: 'defBar',
    speedValue: 'speedBar',
    luckValue: 'luckBar'
};
for (let fieldId in map)
    document.getElementById(map[fieldId]).style.width = document.getElementById(fieldId).value+'%';

Now, outside the function, we can listen for the input event and act accordingly.

document.addEventListener('input', evt => {
    if (!evt.target.matches('table input')) return;
    let intVal = parseInt(evt.target.value);
    if (isNaN(intVal)) return evt.target.value = '';
    if (intVal < 0) return evt.target.value = 0;
    if (intVal > 100) return evt.target.value = 100;
});

Demo.

user_14310092 · Answer

use below code for multiple input box validation (min value and max value):

Example:

user_2460294 · Answer

You could use a regular expression to test if the value entered is a number between 0 and 100.

if (document.getElementById("hpValue").value.match(/^(\d{1,2}|100)$/)){
  // value was a number between 0 and 100
}

You could create a resusable function to test the value:

function isValidRange(inputValue){
   return inputValue.match(/^(\d{1,2}|100)$/);
}

// usage:
if(isValidRange(document.getElementById("hpValue").value)){
   // value was a number between 0 and 100
}

user_13256658 · Answer

Using input type='number' as evilgenious448 points out is a good hint, but ineffective as you can insert a bigger value by keyboard.

You can use Jquery library.

First, add a common class to all inputs, i.e. class = "inpt"

Then, retrieve all the input fields at once and apply if statements.

$(document).on("change", ".inpt", function() {
    $(".inpt").each(function(){
        if ($(this).val() > 100) $(this).val(100);
        if ($(this).val() < 0) $(this).val(0);
    });
});

Is it possible to ensure a User's input doesn't exceed a specific range in JavaScript?

5 Answers