What is wrong with that select options?

Question

I am just trying to make a simple calculation with the values of selected options, however I get false result: pickUp 9 and returnTime 10, it gives no (which must be yea)

but pickUp time 11 and returnTime 14, it gives yea(which is right) so it gives the right result with some specific numbers and with some numbers not..

Here is the (pickUp)select options:

<select id="ophalenUur" class="timePicker selectOption">
    <option value="-">Kies Tijd</option>
    <option value="8">08.00</option>
    <option value="8.5">08.30</option>
    <option value="9">09.00</option>
    <option value="9.5">09.30</option>
    <option value="10">10.00</option>
    <option value="10.5">10.30</option>
    <option value="11">11.00</option>
    <option value="11.5">11.30</option>
    <option value="12">12.00</option>
    <option value="12.5">12.30</option>
    <option value="13">13.00</option>
    <option value="13.5">13.30</option>
    <option value="14">14.00</option>
    <option value="14.5">14.30</option>
    <option value="15.">15.00</option>
    <option value="15.5">15.30</option>
    <option value="16">16.00</option>
    <option value="16.5">16.30</option>
    <option value="17">17.00</option>
    <option value="17.5">17.30</option>
    <option value="18">18.00</option>
    <option value="18.5">18.30</option>
    <option value="19">19.00</option>
    <option value="19.5">19.30</option>
    <option value="20">20.00</option>
</select>

and js:

var pickUp = 0;
var returnTime =0; 

$('#ophalenUur').change(function() {
    pickUp = $('#ophalenUur option:selected').val();
    $('.pickUp').text("PickUp: " + pickUp);
});

$('#inleverenUur').change(function() {
    returnTime = $('#inleverenUur option:selected').val();
    $('.returntime').text("return: " + returnTime);

    if(returnTime > pickUp){ alert("yea");
    } else { alert("no");  }
});

Fiddle: http://jsfiddle.net/jLAaq/27/

What is wrong here? I am looking for hours and I can't see:/

You are comparing text, instead parse them in float and the check the condition — Nish Rathi, Feb 24 '14 at 10:05

Arun P Johny · Accepted Answer · 2014-02-24T10:10:33.330

2

because you are doing a string comparison

var pickUp = 0;
var returnTime = 0;
var totalExtra = 0;

$('#ophalenUur').change(function () {
    //conver the value string to number by prfixing it with + or you can use parseFloat(this.value)
    pickUp = +this.value;
    $('.pickUp').text("PickUp: " + pickUp);
});

$('#inleverenUur').change(function () {
    returnTime = +this.value;
    $('.returntime').text("return: " + returnTime);

    if (returnTime > pickUp) {
        alert("yea");
    } else {
        alert("no");
    }
});

Demo: Fiddle

edited Feb 24 '14 at 10:10

answered Feb 24 '14 at 10:05

Arun P Johny

384,651
66
527
531

1

Just for clarification, why are you using `+this.value`and not `parseFloat(this.value)`? – peter Feb 24 '14 at 10:09
@zahorak it is short by 9 characters :) .. also thanks for bringing parseFloat() in my comments I said parseInt() – Arun P Johny Feb 24 '14 at 10:11
Yes that's true I was just wondering if it's a nice style or a "dirty" hack – peter Feb 24 '14 at 10:13
1

@user2045937 see http://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which – Arun P Johny Feb 24 '14 at 10:17
1

@zahorak it is the unary plus operator... see http://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which – Arun P Johny Feb 24 '14 at 10:17

score 1 · Answer 2 · answered Feb 24 '14 at 10:08

1

I think the reason could be returnTime and pickUp is string. so "9">"10". Try to use parseFloat function to parse returnTime and pickUp.

answered Feb 24 '14 at 10:08

Tommaso_zhou

41
5

score 1 · Answer 3 · answered Feb 24 '14 at 10:10

1

You were comparing the integer as string. You can use the parseFloat method

Demo Link

CODE:

var pickUp = 0;
var returnTime =0; 
var totalExtra = 0;

$('#ophalenUur').change(function() {
pickUp = $('#ophalenUur option:selected').val();
    $('.pickUp').text("PickUp: " + pickUp);
});

$('#inleverenUur').change(function() {
returnTime = $('#inleverenUur option:selected').val();
    $('.returntime').text("return: " + returnTime);
 if(parseFloat(returnTime) > parseFloat(pickUp)){
       alert("yea");
   }else{
    alert("no");           
  }
});

answered Feb 24 '14 at 10:10

Furquan Khan

1,586
1
15
30

i would rather use parseFloat(). Try to select 12.00 and 12.30. :) – sinisake Feb 24 '14 at 10:12
yeah that right. It did not click to me at that time.. I changed my answer. thanks anywayz – Furquan Khan Feb 24 '14 at 10:13

What is wrong with that select options?

3 Answers3