CODEWITHSUNDEEP
javascript
user3064038
user3064038

Reputation: 55

JavaScript returning NaN value

I have two ui-slider, and I have a calculation on a slide callback, but it's returning NaN value

$( document ).ready(function() {  
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
        var amount = parseInt(ui.value);
        var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
        $('#currentamount').val(amount);
        $('#monthly').text(Math.round(temp1));
      }
  });
  $("#years").slider({
      range: "min",
      value: 8,
      min: 1,
      max: 12,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
       var years = parseInt(ui.value);
       var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
       $('#yearsval').text(years);
       $('#monthly').text(Math.round(temp1));
      }
  });
});

I also made a fiddle: http://jsfiddle.net/kristianladd/w0xayf7t/

The reason why I put it on its slide callback, so that if you slide either of the two, it will calculate.

Upvotes: 1

Views: 135

Answers (6)

user3468001
user3468001

Reputation: 

var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));

the variable years does not exist in this scope.

var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));

the variable amount does not exist in this scope.

So, if you want use the variables years and amount for calculations, I think you should move them to global scope. Or inside slider, you could get value years or amount from element, but this is not exactly
Ex: https://jsfiddle.net/thaopv/e28rf6sd/

Good luck.

Upvotes: 0

Shreevardhan
Shreevardhan

Reputation: 12641

temp1 is using both amount and years to calculate. You'll have to make it global in order to work correctly. Since this is common code for both callbacks, it's better to extract it as a separate function. Simply

function setMonthly() {
    var interest = 0.0325,
        amount = parseInt($('#currentamount').val()),
        years = parseInt($('#yearsval').html()),
        ans = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), - (years * 12)));
    $('#monthly').text(Math.round(ans));
}

and call this function from each slide callback. See the updated fiddle http://jsfiddle.net/w0xayf7t/4/

Upvotes: 0

Zdeněk Tuček Novotný
Zdeněk Tuček Novotný

Reputation: 26

Simply read status from other slider whenever slide is called:

$( document ).ready(function() {  
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var years = $('#years').slider("option", "value");
        var interest = 0.0325;
        var amount = parseInt(ui.value);
        var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
        $('#currentamount').val(amount);
        $('#monthly').text(Math.round(temp1));
      }
  });
  $("#years").slider({
      range: "min",
      value: 8,
      min: 1,
      max: 12,
      step: 1,
      slide: function(event, ui) {
       var amount = $('#amount').slider("option", "value");
       var interest = 0.0325;
       var years = parseInt(ui.value);
       var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
       $('#yearsval').text(years);
       $('#monthly').text(Math.round(temp1));
      }
  });
});

Upvotes: 1

RPallas
RPallas

Reputation: 577

Year and amount must be declared outside.

    $(document).ready(function () {
  var amount = 160000;
  var years = 8;
  $("#amount").slider({
    range: "min",
    value: 160000,
    min: 10000,
    max: 400000,
    step: 1,
    slide: function (event, ui) {
      var interest = 0.0325;
      amount = parseInt(ui.value);
      var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
      $('#currentamount').val(amount);
      $('#monthly').text(Math.round(temp1));
    }
  });
  $("#years").slider({
    range: "min",
    value: 8,
    min: 1,
    max: 12,
    step: 1,
    slide: function (event, ui) {
      var interest = 0.0325;
      years = parseInt(ui.value);
      var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
      $('#yearsval').text(years);
      $('#monthly').text(Math.round(temp1));
    }
  });
});

JSFiddle: https://jsfiddle.net/w0xayf7t/3/

Upvotes: 0

Duncan Cowan
Duncan Cowan

Reputation: 495

You need to define years and amount outside your callbacks:

$( document ).ready(function() { 
  var years = 8;
  var amount = 160000;
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
        amount = parseInt(ui.value);
        var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
        $('#currentamount').val(amount);
        $('#monthly').text(Math.round(temp1));
      }
  });
  $("#years").slider({
      range: "min",
      value: 8,
      min: 1,
      max: 12,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
       years = parseInt(ui.value);
       var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
       $('#yearsval').text(years);
       $('#monthly').text(Math.round(temp1));
      }
  });
});

JSfiddle: http://jsfiddle.net/w0xayf7t/2/

Upvotes: 1

Evan Knowles
Evan Knowles

Reputation: 7501

In the one callback you define amount, in the other callback you define years, but you use both variables in both callbacks.

That's why you get a NaN, because not all of the variables used are defined.

Upvotes: 0

Related Questions