使用 javascript 检查输入数字是否大于某个值

Question

I am trying to do some calculation in page, however, it doesn't work, I have tried the following code, does anyone can tell me the correct answer?

For example, when I enter a number then it will do one of the calculation.

<table><tr><td>
<input name="per_pax" size="2" style="border-style:none" type="text" id="per_pax" value="">
</td><td>
<input name="sum_tlcost" type="hidden" id="sum_tlcost" value="<?php echo $tl_cost;?>">
<input name="sum_htl_pp" type="hidden" id="sum_htl_pp" value="<?php echo $sum_htl_pp;?>">
<input name="sum_coach" type="hidden" id="sum_coach" value="<?php echo $sum_coach;?>"> 
<input name="pax" size="5" readonly="readonly" type="text" id="pax" value="">
</td></tr></table>
<script>
$(document).ready(function () {
var total = Number($("#per_pax").val());
if(total >= 20) {
$("#sum_tlcost,#sum_htl_pp,#sum_coach,#per_pax").keyup(function () {
if (parseInt($("#per_pax").val()) >= 20) {
$("#pax").val(Math.round(Number($("#sum_htl_pp").val()) + Number($("#sum_tlcost").val()) / Number($("#per_pax").val()) + Number($("#sum_coach").val()) / Number($("#per_pax").val()));
)}else{
$("#pax").val(Math.round(Number($("#sum_htl_pp").val()) + Number($("#sum_tlcost").val()) + Number($("#sum_coach").val())))
}
})}})
</script>

Answer 1

I'm not overly fond of the jquery keyup calls... so here's a snippet that should call your function using normal DOM event calls. The input event triggers as they type.. which should be similar to what you're trying to do with the keyups... I also cleaned up the function itself to make it more readable for presentation.

 function onInputChange() { var perPax = parseInt($("#per_pax").val()); var tlCost = Number($("#sum_tlcost").val()); var htlPP = Number($("#sum_htl_pp").val()); var coach = Number($("#sum_coach").val()); var newValue = 0; if (perPax < 20) { newValue = (htlPP + tlCost) / (perPax + (coach / perPax)); } else { newValue = htlPP + tlCost + coach; } $("#pax").val(Math.round(newValue)) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input name="per_pax" size="2" style="border-style:none" type="text" id="per_pax" value="" oninput="onInputChange()"> </td> <td> <input name="sum_tlcost" type="hidden" id="sum_tlcost" value="<?php echo $tl_cost;?>"> <input name="sum_htl_pp" type="hidden" id="sum_htl_pp" value="<?php echo $sum_htl_pp;?>"> <input name="sum_coach" type="hidden" id="sum_coach" value="<?php echo $sum_coach;?>"> <input name="pax" size="5" readonly="readonly" type="text" id="pax" value=""> </td> </tr> </table>