CODEWITHSUNDEEP
javascriptjqueryhtml
user11113880
user11113880

Reputation: 73

Jquery does not count correctly?

I want to book a ticket with a free offer, these are the rules:

The check (validate()) happens after page loading and on every change or keyup event. All seems ok when I increase tickets to buy from 1 to 2, the offer increase from 1 to 2, as expected.

My issue:
When I leave "ticket" (first input) on 2 and I increase the offer, it does not exceed 9, at 10 it set the input value back to same value that is in the ticket input.

Also, if I hold arrow up to increase number until 50, for example, it's ok.

What's wrong?

My code is:

validate();

$('.input_data').on('change keyup', validate);

function validate() {
  control_tick = $("input[name='ticket']").val();
  if ((control_tick < 1) || (control_tick > 4)) {
    control_tick = 1;
    $("input[name='ticket']").val(control_tick);
  } else {
    $("input[name='ticket']").val(control_tick);
  }

  control_off = $("input[name='offer']").val();

  if (control_tick > control_off) {
    control_off = control_tick;
    $("input[name='offer']").val(control_off);
    console.log('prezzo minore di ticket');
  }
  if (control_off => control_tick) {
    $("input[name='offer']").val(control_off);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ticket number (max 4):</label><br>
<input class="w3-input w3-center input_data" type="number" name="ticket" value="1" min="1" max="4" step="1">

<label>Offer €:</label>

<input class="w3-input w3-center input_data" type="number" name="offer" value="1" min="1" max="1000" step="1">

Upvotes: 1

Views: 84

Answers (1)

ADyson
ADyson

Reputation: 61914

Cause

When you get the value of a field using .val(), that value is always of type string. Therefore when you compare the values using if (control_tick > control_off) {, you're comparing two strings, not two numbers. And in the rules of string comparison, "2" is considered to be "greater" than "10", because it compares each character one at a time, rather than the whole string, and clearly it regards "2" as greater than "1".

(Regarding holding the up arrow to 50, this will be ok because "50" (or rather, "5" is greater then "2" in string comparisons, just as it is in numeric comparisons. But if you hold it all the way to 100 it'll reset again - I'm sure you can work out why, by now.)

Solution

You need to parse your values as numbers before you attempt to compare them. Since these will always be whole numbers, we can use parseInt. This will ensure it does a numeric comparison instead.

See the demo below for a working example.

(Note also that removed the last if statement - apart from the slight syntax error (=> should be >=, although it doesn't cause a syntax error because it's valid, (but useless) as an arrow expression) it seemed redundant, because you're just populating the field with the same value you got from it a moment earlier. The else after the first if is also redundant for the same reason.)

validate();

$('.input_data').on('change keyup', validate);

function validate() {
  control_tick = parseInt($("input[name='ticket']").val());

  if ((control_tick < 1) || (control_tick > 4)) {
    control_tick = 1;
    $("input[name='ticket']").val(control_tick);
  }

  control_off = parseInt($("input[name='offer']").val());

  if (control_tick > control_off) {
    control_off = control_tick;
    $("input[name='offer']").val(control_off);
    console.log('prezzo minore di ticket');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ticket number (max 4):</label><br>
<input class="w3-input w3-center input_data" type="number" name="ticket" value="1" min="1" max="4" step="1">

<label>Offer €:</label>

<input class="w3-input w3-center input_data" type="number" name="offer" value="1" min="1" max="1000" step="1">

Upvotes: 3

Related Questions