If, else if statement not working (only displays if)

Question

It only displays the if statement. Doesn't get to the 2nd or the 3rd statement. The HTML portion only displays out the "commentE" value.

var totalAmount = (conversion * sAmount);
totalAmount = $("#totalAmount").val(totalAmount);

var myadvice;
myadvice = $("#myadvice").val();

var great;
great = localStorage.getItem("great");

var commentE;
commentE = localStorage.getItem("commentE");

var between;
between = localStorage.getItem("between");

var betweenb;
betweenb = localStorage.getItem("betweenb");

var commentB;
commentB = localStorage.getItem("commentB");

var less;
less = localStorage.getItem("less");

var commentL;
commentL = localStorage.getItem("commentL");

if (totalAmount >= great) {
    myadvice = $("#myadvice").val(commentE);
} else if ((totalAmount >= between) && (totalAmount <= betweenb)) {
    myadvice = $("#myadvice").val(commentB);
} else if (totalAmount <= less) {
    myadvice = $("#myadvice").val(commentL);

These are the HTML portion (index page to get input)

<div data-role="navbar">
    <ul>
        <li>
            <label for="between">Between</label>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="text" 
                        name="between" id="between" placeholder="between" value="200">
                </div>
                <div class="ui-block-b">
                    <input type="text" 
                        name="betweenb" id="betweenb" placeholder="between" value="499">
                 </div>
            </div>
        </li>
        <li>
            <label for="commentB">Comment</label>
            <input type="text" name="commentB" 
                id="commentB" placeholder="comments" value="OK">
        </li>
    </ul>
</div>

These are supposed to be the results (results page to display the input of previous page

    <div data-role="main" class="ui-content">
        <div class="ui-field-contain">
            <div data-role="fieldcontainer">
                <label for="advice"> My Advice is as follows: </label>
                <input type="text" name="advice" id="advice">
            </div>
        </div>
    </div>
</b>

Could you post the html associated with your js ? – edkeveked Nov 29 '17 at 15:44 — edkeveked, Nov 29 '17 at 15:44
What do you mean? That's what an `else if` is meant to do – George Nov 29 '17 at 15:45 — George, Nov 29 '17 at 15:45

Michael Shopsin · Answer 1 · 2017-11-29T16:50:08.257

If else statements are executed in order, for example:

total = 10;
greater = 5;
between = 4;
if(total >= greater) {
  console.log("comment a");
} else if (total >= between) {
  console.log("comment b");
}

The result will be comment a because total >= greater is tried before total >= between. Both statements are true, but the first one is tried first, and only the contents of one statement will be executed. After the code inside an if else statement is run the next thing executed is below the if else group.

Buh Buh · Answer 2 · 2017-11-29T17:35:39.923

Your code is just all kinds of wrong.

totalAmount = $("#totalAmount").val(totalAmount);

This sets the totalAmount to the jQuery object $("#totalAmount")
You probably wanted to leave it set to a number instead.

great = localStorage.getItem("great");

This sets great to a string. Maybe "5".
You probably wanted to call parseFloat to parse this into a number.

//so
if (totalAmount >= great) {
//means
if ($("#totalAmount") > "5") {

Is a jQuery object greater than a string? Apparently this is true! So you get the first if.

If, else if statement not working (only displays if)

2 Answers2