Javascript doesn't work with changed value

Question

I got this input:

<input name='num2' type='number' id=num2 onblur="checkValue(this)">
        <script>
    function checkValue(input) {
    console.log(input.value);
  if (input.value > 20) {
     return input.value = 20;
  } else if (input.value < 0){
     return input.value = 0;
  } else if (input.value == '' || isNaN(input.value)) {
     return input.value = 0;
  } else {
     return input.value;
  }
}
$("#num1, #num2").focusout(function() {
    $("#answer").html('');
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    var answer = num1 * num2;
    $("#answer").html(answer);
});
        </script>

the problem is that when I write the number whitch is higher than 20 so the input value change, but javascript still continue to count with what ever the number I write in, for exampe 100000. But I want that javascript count with the onblur changed value. Please show me at least if I going the right way or should I use some other script.

Answer 1

If you run the code below you will see that the focusout handler is called before the onblur handler.

 function checkValue(input) { console.log('blur', input.value); if (input.value > 20) { input.value = 20; } else if (input.value < 0){ input.value = 0; } else if (input.value == '' || isNaN(input.value)) { input.value = 0; } else { input.value; } } $("#num1, #num2").focusout( function() { $("#answer").html(''); var num1 = $("#num1").val(); var num2 = $("#num2").val(); var answer = num1 * num2; console.log('focusout', num1, num2, answer); $("#answer").html(answer); } );

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name='num1' type='number' id=num1> <input name='num2' type='number' id=num2 onblur="checkValue(this)"> <div id="answer"></div>

So you are not limiting the number in num2 until after you calculate your answer .

Maybe you should move your logic to limit your num2 within the onblur handler.

UPDATE

The example below will set the limits on both input fields before calculating the totals.

If neither of these examples are what you want then please explain your desired result so we can help.

 function checkValue(input) { console.log('blur', input.value); if (input.value > 20) { input.value = 20; } else if (input.value < 0){ input.value = 0; } else if (input.value == '' || isNaN(input.value)) { input.value = 0; } else { input.value; } } $("#num1, #num2").focusout( function() { $("#answer").html(''); var $num1 = $("#num1"); var $num2 = $("#num2"); checkValue($num1[0]); checkValue($num2[0]); var num1 = $num1.val(); var num2 = $num2.val(); var answer = num1 * num2; console.log('focusout', num1, num2, answer); $("#answer").html(answer); } );

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name='num1' type='number' id=num1 onblur="checkValue(this)"> <input name='num2' type='number' id=num2 onblur="checkValue(this)"> <div id="answer"></div>

Answer 2

solution was very simple.. :) sorry for this topic.. true is that I had to add more value with if,, but if someone have a better result direct for blur pleas post it

 <input name="num1" type='number' id=num1 value="<?php echo round($final5, 2); ?>" disabled><br />
 <input name='num2' type='number' id=num2 onblur="checkValue(this)">
        <script>
    function checkValue(input) {
    console.log(input.value);
  if (input.value > 10) {
     return input.value = 10;
  } else if (input.value < 0.09){
     return input.value = 0.1;
  }  else {
     return input.value;
  }

}

$("#num1, #num2").focusout(function() {
    $("#answer").html('');
    var num1 = $("#num1").val();
    var num2 = $("#num2").val();
    if (num2 > 10) {
        num2 = 10;
    } else if (num2 < 0.1 ) {
        num2 = 0.1;
    } else {
        num2;
    }
    var answer = num1 * num2;
    $("#answer").html(answer);
});
        </script>