Javascript function is returning unexpected result

Question

I have written a good amount of Javascript, primarily using JQuery but I'm stumped on something very simple.

In the following code (also found here), I simply want to use the boolean return value of the twoExists() function in some logic. I have no idea why this behavior is happening, but it works counter intuitively. As in, if I switch the logic I get the result I want.

<html>
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
    <p>Four</p>
    <strong></strong>
</html>

var myJS = {
    twoExists: function() {
       $("p").each(function() {
          if($(this).text() == "Two") {
              return true;
           }
       });

       return false;
    },
    foo: function() {
        if(myJS.twoExists()) {
            $("strong").text("Found two");
        }
        else {
            $("strong").text("Did not find two");
        }
    }

    bar: function() {
        if(! myJS.twoExists()) {
            $("strong").text("Found two");
        }
        else {
            $("strong").text("Did not find two");
        }
     }
}

myJS.foo(); // result: <strong>Did not find two</strong>
myJS.bar(); // result: <strong>Found two</strong>

"I have written a good amount of Javascript, primarily using Javascript" Um... I don't follow :P — bjb568
– bjb568, Commented Feb 2, 2014 at 0:38
No matter what you do, you are always going to get false due to this statement: return false; So, it's finding two not because you switched but because the opposite of false is true. Try removing the two from your options and see.. — Kiran
– Kiran, Commented Feb 2, 2014 at 0:39
+1 for bjb, the quickest way to spot someone who hasn't written JavaScript is when they say jQuery is 'writing JavaScript' — PW Kad
– PW Kad, Commented Feb 2, 2014 at 0:42
PW Kad, I did not state jQuery is "writing javascript", I stated that I have used jQuery while writing Javascript. — phpete
– phpete, Commented Feb 2, 2014 at 3:31
This question is similar to: Most elegant way to return value from within JQuery $.each?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Oct 14 at 15:11

jhummel · Accepted Answer · 2014-02-02 00:40:26Z

5

I think this might be happening because of how the each loop in jquery returns. return true works like a continue statement in a normal js loop, I don't think it's going to return from the twoExists function - instead it is going to just jump from the current iteration onto the next one. Maybe try this:

twoExists: function() {
   var found = false;
   $("p").each(function() {
      if($(this).text() == "Two") {
          found = true;
       }
   });

   return found;
},

answered Feb 2, 2014 at 0:40

jhummel

1,76414 silver badges23 bronze badges

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

Comments

Dennis · Accepted Answer · 2014-02-02 00:40:41Z

2

When you return true from the each, you are returning from the callback, not the parent function:

   var flag = false;
   $("p").each(function() {
      if($(this).text() == "Two") {
          flag = true;
       }
   });
   return flag;

answered Feb 2, 2014 at 0:40

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

Ram · Accepted Answer · 2014-02-02 00:56:49Z

1

As other answers mention what is returned is the returned value of the each callback function not the twoExists function. For solving the issue you can also use a simple for loop:

twoExists: function () {
    var p = document.getElementsByTagName('p'), 
        l = p.length;

    for (var i = 0; i < l; i++)
        if (p[i].textContent === 'Two') return true;

    return false;
}

answered Feb 2, 2014 at 0:56

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

mikhail · Accepted Answer · 2014-02-02 01:27:29Z

0

Since you're already using JQuery, you could also take advantage of advanced selectors and save yourself some work:

twoExists: function () {
    if ($("p:contains(Two)").length) {
        return true;
    }
    return false;
}

The other answers provide good insight into your current behavior. Your current return true; is returning from the callback to .each and JQuery just moves on to the next element, so your twoExists function will always return false.

answered Feb 2, 2014 at 1:27

mikhail

5,2254 gold badges38 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript function is returning unexpected result

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related