Multi-layered javascript function returning 'undefined'

Question

This is probably simple, just missing how I should return this data.

var sumInputs = function (input) {
  var reloadData = function () {  
    var sum = 0;
    $(input).each(function() {
        sum += Number($(this).val());
    }); 
    return sum;
  };

  $(window).ready(function () {                  
    var changeOn = $(input);
    changeOn.on('change', function () {
      var data = reloadData();
    });
    changeOn.trigger('change');
  });
};

var sum = sumInputs('.feature');
console.log(sum);

Right now I'm just getting undefined as my result. Here's my jsfiddle: http://jsfiddle.net/bk97qc4L/

Thanks for the help.

light · Accepted Answer · 2015-07-11 18:10:41Z

1

Your sumInputs is a function that takes in one parameter and returns nothing. Hence sum evaluates to undefined.

Inside sumInputs, you have declared a variable reloadData (as a function), and made one event binding to run whenever the window is ready. You did not specify any return value, and have not even executed the function reloadData.

I suspect this is what you want: http://jsfiddle.net/bk97qc4L/1/

answered Jul 11, 2015 at 18:10

light

4,3173 gold badges29 silver badges39 bronze badges

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

1 Comment

dvoutt Over a year ago

Thanks, I knew it was obvious. I've been working in PHP so much my brain was not computing the answer this morning.

vinayakj · Accepted Answer · 2015-07-11 18:16:04Z

$(document).ready(function () {                  
   function sumInputs(input, output) {
      var $input = $(input);
      
      function reloadData() {  
        var sum = 0;
        $(input).each(function() {
            sum += Number($(this).val());
        }); 
        return sum;
      };
    
      $input.on('change', function () {
          $('#output').val(reloadData());
        });
   };
    
    sumInputs('input.feature','#output');
    $('input.feature').change(); // for first time output
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><td><input type="text" class="feature" value="10" /></td></tr>
    <tr><td><input type="text" class="feature" value="10" /></td></tr>
    <tr><td><input type="text" class="feature" value="10" /></td></tr>
    <tr><td><input type="text" class="feature" value="10" /></td></tr>
</table>

<label for="output">Output:</label>
<input type="text" id="output" />

Collectives™ on Stack Overflow

Multi-layered javascript function returning 'undefined'

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related