jQuery function doesn't return values

Question

I'm getting the wrong calculation and the function doesn't return the 3 values from .investment elements so that I'll be able to calculate them and output them into .payout elements. What am I doing wrong here?

function investmentArray() {
  $('.investment').each(function() {
    var text = $(this).text().slice(0, -2);
    text = parseFloat(text.replace(/,/g, ''));
    text = Number(text);
    return text;
  });
};

function payoutCalc() {
  var i = investmentArray();
  return i * 1.8;
}

var payoutArray = function() {
  var el = $('.payout');
  el.each(function() {
    var result = Number(payoutCalc()).toFixed(2);
    $(this).html(result + " $");
  });
}
payoutArray();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Investment</th>
    <th>Payout</th>
  </tr>
  <tr>
    <td class="investment">1,937.00 $</td>
    <td class="investment">285.00 $</td>
    <td class="investment">1,926.00 $</td>
  </tr>
  <tr>
    <td class="payout"></td>
    <td class="payout"></td>
    <td class="payout"></td>
  </tr>
</table>

rrk · Accepted Answer · 2016-04-28 05:36:06Z

6

Problem is that you are trying to return from jquery .each() loop. You need to pass the index and get elements instead of using loop that.

To break a $.each loop, you have to return false in the loop callback. Returning true skips to the next iteration, equivalent to a continue in a normal loop.

function investmentArray(c) {
  text = $('.investment').eq(c).text().slice(0, -2);
  text = parseFloat(text.replace(/,/g, ''));
  text = Number(text);
  return text;
};

function payoutCalc(c) {
  var i = investmentArray(c);
  return i * 1.8;
}

var payoutArray = function() {
  var el = $('.payout');
  el.each(function(i, val) {
    var result = Number(payoutCalc(i)).toFixed(2);
    $(this).html(result + " $");
  });
}
payoutArray();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Investment</th>
    <th>Payout</th>
  </tr>
  <tr>
    <td class="investment">1,937.00 $</td>
    <td class="investment">285.00 $</td>
    <td class="investment">1,926.00 $</td>
  </tr>
  <tr>
    <td class="payout"></td>
    <td class="payout"></td>
    <td class="payout"></td>
  </tr>
</table>

edited Apr 28, 2016 at 5:36

answered Apr 27, 2016 at 14:36

rrk

15.9k4 gold badges32 silver badges49 bronze badges

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

2 Comments

Randy Over a year ago

Wow! That was quick! Thank you so much sir! I think I need to study more about loops! :)

rrk Over a year ago

@Randy It is not a problem in normal for loop. But in case of jQuery each, when you return, that means it either breaks loop or continues loop. It wont return value to the outer function.

Collectives™ on Stack Overflow

jQuery function doesn't return values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related