Javascript - onblur function cannot change the value of the textbox

Question

I have some textboxes allowing users to enter numbers from 0 to 20. So that I have a js validation code to test if they follow the rule or not.

I have such the following textboxes:

<input type="textbox" name="tx1" onblur="checkValue(this.value)" />
<input type="textbox" name="tx2" onblur="checkValue(this.value)" />
....

Then I write a js function like this:

function checkValue(value) {
  if (value > 20) {
     return this.value = 20;
  } else if (value < 0){
     return this.value = 0;
  } else if (value == '' || isNan(value)) {
     return this.value = 0;
  } else {
     return this.value;
  }
}

I tried to test via console.log(). I tried alert('hi') and it works. However, it does not change value at all when meeting the above conditions. So could anyone help me to solve this?

Answer 1

Try this

<input type="textbox" name="tx1" onblur="checkValue(this)" />

function checkValue(sender) {
var value = parseInt(sender.value);
  if (value > 20) {
     sender.value = 20;
  } else if (value < 0){
     sender.value = 0;
  } else if (value == '' || isNan(value)) {
     sender.value = 0;
  } else {
     return sender.value;
  }
}