Reputation: 131

If else is not working in javascript

I have a simple if else statement in Javascript that calculates a fare. I made an if else statement so that if the value of "StartStation" is greater than "EndStation" it will subtract "StartStation" value to "EndStation" value. If not then it will subtract "EndStation" value to "StartStation" value. The problem is that when I choose From: station 8 and To: Station 10 I got -2 instead of +2.Could you help sort this?

HTML

<form>
            From:<select id="StartStation">
            <option selected="selected">---Please select start station</option>
            <option value="1">Station 1</option>
            <option value="2">Station 2</option>
            <option value="3">Station 3</option>
            <option value="4">Station 4</option>
            <option value="5">Station 5</option>
            <option value="6">Station 6</option>
            <option value="7">Station 7</option>
            <option value="8">Station 8</option>
            <option value="9">Station 9</option>
            <option value="10">Station 10</option>
            <option value="11">Station 11</option>
            <option value="12">Station 12</option>
            <option value="12">Station 13</option>
        </select>
            To:<select id="EndStation">
              <option value="1">Station 1</option>
            <option value="2">Station 2</option>
            <option value="3">Station 3</option>
            <option value="4">Station 4</option>
            <option value="5">Station 5</option>
            <option value="6">Station 6</option>
            <option value="7">Station 7</option>
            <option value="8">Station 8</option>
            <option value="9">Station 9</option>
            <option value="10">Station 10</option>
            <option value="11">Station 11</option>
            <option value="12">Station 12</option>
            <option value="12">Station 13</option>
       </select>    
            </form>
            <input type="button" value="Search" id="Search"/>   
            <div id="FareOutput"></div>

Javascript

$("#Search").on("click", function(){
        var $opt = $("#StartStation option:selected"); //From: Selected     
        var strno = $opt.val(); // Start value of fare

        var $opt2 = $("#EndStation option:selected"); //To: Selected
        var endno = $opt2.val(); //End value of fare

            // Fare Calculation -----------------------------------------------------

            if (strno > endno) { // If the selected station start from South e.g Taft-North
                var fare = (strno - endno);              
                }
            else {
                var fare = (endno - strno);                      
            }
                console.log(fare);         
                if (fare >=1 && fare <= 2){
                var fareresult = "$13"; }
                else if (fare >=3 && fare<=4){
                    var fareresult =  "$16";
                }
                else if (fare >=5 && fare<=7 ){
                    var fareresult =  "$20";
                }

                else if (fare >=8 && fare<=10 ){
                    var fareresult =  "$24";
                }
                else if (fare >=11 && fare<=12 ) {
                    var fareresult =  "$28";}

                    $("#FareOutput").html("Fare:" +" " + fareresult);

                });

Upvotes: -1

Answers (6)

Utsav Upendra

Reputation: 11

Yeah Okay, try this:

   $("#Search").on("click", function () {
    var $opt = $("#StartStation option:selected"); //From: Selected     
    var strno =parseInt(  $opt.val()); //New Integer Start value of fare

    var $opt2 = $("#EndStation option:selected"); //To: Selected
    var endno = parseInt($opt2.val()); //New Integer End value of fare

    // Fare Calculation -----------------------------------------------------

    if (strno > endno) { // If the selected station start from South e.g Taft-North
        var fare = (strno - endno);
    }
    else {
        var fare = (endno - strno);
    }
    console.log(fare);
    if (fare >= 1 && fare <= 2) {
        var fareresult = "$13";
    }
    else if (fare >= 3 && fare <= 4) {
        var fareresult = "$16";
    }
    else if (fare >= 5 && fare <= 7) {
        var fareresult = "$20";
    }

    else if (fare >= 8 && fare <= 10) {
        var fareresult = "$24";
    }
    else if (fare >= 11 && fare <= 12) {
        var fareresult = "$28";
    }

    $("#FareOutput").html("Fare:" + " " + fareresult);

});

Using pasreInt() to store integer value will solve the problem as by default it is taking strno and endno as string.

Upvotes: 1

Kailas

Reputation: 7578

Better convert the numbers to integer or float (depending on precision requirement) before calculations. Use parseInt() (for javascript) or .toNum() (for jquery):

   var $opt = $("#StartStation option:selected"); //From: Selected     
    var strno = parseInt($opt.val()); // Start value of fare

    var $opt2 = $("#EndStation option:selected"); //To: Selected
    var endno = parseInt($opt2.val()); //End value of fare

        // Fare Calculation -----------------------------------------------------

        if (strno > endno) { // If the selected station start from South e.g Taft-North
            var fare = (strno - endno);              
            }
        else {
            var fare = (endno - strno);                      
        }

Also, there are too many vars here optimize your code to use lesser memory space by:

$("#Search").on("click", function(){
    var $opt = $("#StartStation option:selected"); //From: Selected     
    var strno = $opt.val(); // Start value of fare

    var $opt2 = $("#EndStation option:selected"); //To: Selected
    var endno = $opt2.val(); //End value of fare

        // Fare Calculation -----------------------------------------------------
        var fare = 0;
        if (strno > endno) { // If the selected station start from South e.g Taft-North
             fare = (strno - endno);              
            }
        else {
             fare = (endno - strno);                      
        }
            console.log(fare);  
            var fareresult = "$0";       
            if (fare >=1 && fare <= 2){
             fareresult = "$13"; }
            else if (fare >=3 && fare<=4){
                 fareresult =  "$16";
            }
            else if (fare >=5 && fare<=7 ){
                 fareresult =  "$20";
            }

            else if (fare >=8 && fare<=10 ){
                 fareresult =  "$24";
            }
            else if (fare >=11 && fare<=12 ) {
                 fareresult =  "$28";}

                $("#FareOutput").html("Fare:" +" " + fareresult);

            });

Hope this helps.. :)

Upvotes: 1

Pankaj Verma

Reputation: 191

Before comparing & subtraction, you should parse values in to numeric (e.g to parse value in integer use js function parseInt()).

Upvotes: 1

MichaelK

Reputation: 3113

@Gremash has a better solution for you, I would just like to tell you what the problem is:

When you are doing the comparison if (strno > endno) the values are still treated as string. And the string "8" is greater than the string "10", which trips the comparison. Then you end up in the subtraction and only then are the values auto-converted to number.

You want to make sure the values are number before you compare them.

Upvotes: 1