If statement not working using jQuery

Question

I have a variable that gets the text from a div. I compare that text using an if statement and then apply CSS to it depending on if it is true or false. For some reason, I cannot get it to work. The variable is getting the correct text because I verified through console.log but the if statement is not working. Here is my code:

$(document).ready(function(){
    var singleStatus = $('.single-status').text();
    console.log(singleStatus); // This outputs 'Pending' to the console
    if(singleStatus === 'Pending'){
        $('.single-status').css('color', '#f2721d'); // This does nothing
        console.log(singleStatus); // This does nothing...
    }
});

Can you reproduce this error, in the stack snippets here, or elsewhere with JS Fiddle? That looks functional. — David Thomas
– David Thomas, Commented Nov 5, 2014 at 17:12
$.trim() the string to remove any unwanted whitespace around the text. — iCollect.it Ltd
– iCollect.it Ltd, Commented Nov 5, 2014 at 17:13
try to do a less specific compare and see if that works == instead of === — somethinghere
– somethinghere, Commented Nov 5, 2014 at 17:17

iCollect.it Ltd · Accepted Answer · 2014-11-06 09:16:53Z

2

Posting my original comment as answer...

Assume whitespace in text content:

The most common problem with console logging, is that you can't see a lot of whitespace. Whitespace is traditionally the characters that provide formatting but are invisible. These include Space, Tab, Carriage return & Line feed.

Your div most likely has a carriage return, or spaces, or tabs, in it around Pending (usually as a result of prettifying the HTML in most editors):

e.g. it may actually look like:

<div>Pending
</div>

or

<div>Pending </div>

or even

<div>
   Pending
</div>

and text() returns all text content including whitespace.

Solution:

Use $.trim to remove unwanted whitespace before the comparison:

if($.trim(singleStatus) === 'Pending'){

You don't want to use string.trim() as not all browsers support it. That's why jQuery provides the static $.trim() method.

Note: As text() returns a string (or undefined) changing the comparison to == will have no effect on the problem.

edited Nov 6, 2014 at 9:16

answered Nov 5, 2014 at 17:23

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

dericcain Over a year ago

Sorry for the wait. I'm at lunch and will test it once I get back. I am thinking your answer may be the correct one. I already tried == and it rendered the same results.

Jonathon Hibbard Over a year ago

I thought it would make no difference, but i just tested my own theory on the ==. great note, i actually had just assumed the opposite.

iCollect.it Ltd Over a year ago

@Jonathon Hibbard: Since when is == case-insensitive? :) jsfiddle.net/TrueBlueAussie/fgea3onb

Jonathon Hibbard Over a year ago

I'm an idiot for saying that and have noted that already lol.

somethinghere Over a year ago

@TrueBlueAussie indeed the equals wouldn't make a difference. Long day :) good answer! Very curious whether it solved it...

|

Jonathon Hibbard · Accepted Answer · 2014-11-05 17:28:13Z

Could be a number of problems here.

You'll probably need to do something like casting the value to lowercase (singleStatus.toLowerCase()), trimming all whitespace off ( using a regex replace or something similar ) along with ensuring anything else (like html, or whatever else) that could possibly cause the strings not to equate. You'll need to do all this preparation and sanitization before evaluating it and checking for the value you're after.

if there is any differences whatsoever between strings, it will fail.

>>>Edit<<<

To be clear here, the use of toLowerCase() and trim and anything else like that - the whole point is to get the strings as generic as possible. you'd then have to just evaluate it as str === 'pending'. this will ensure that the string case is the same, and also require less work to ensure that there are capital letters wherever it is you may be looking for them.

>>> Edit 2<<<

Updated my answer by removing references to == and ===

vrajesh · Accepted Answer · 2014-11-05 17:24:39Z

-1

may be your solution is:

$('#btn').click(function(e){  
    var singleStatus = $('.single-status').text();
    alert(singleStatus);    
    if(singleStatus === 'Pending'){
        $('.single-status').css('color', '#f2721d'); // This does nothing
        console.log(singleStatus); // This does nothing...
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="single-status">Pending</div><button id="btn"> click</button>

answered Nov 5, 2014 at 17:24

vrajesh

2,9423 gold badges28 silver badges40 bronze badges

3 Comments

iCollect.it Ltd Over a year ago

Aside from changing log to alert, and providing your own HTML which may not match, how does this solve the problem? :)

vrajesh Over a year ago

i said may be ...buddy

iCollect.it Ltd Over a year ago

Maybe indeed. How could this suggestion possibly solve the problem? You have not actually changed anything related to the cause :)

Collectives™ on Stack Overflow

If statement not working using jQuery

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related