JavaScript возвращая значение NaN

Question

У меня есть два UI-слайдер, и у меня есть расчет на слайд обратного вызова, но это возвращение значения NaN

$(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)); 
     } 
    }); 
}); 

Я также сделал скрипку: http://jsfiddle.net/kristianladd/w0xayf7t/

причины, почему Я положил его на обратный вызов слайда, так что, если вы сдвинете один из двух, он будет вычислять.

Answer 1

Просто прочитайте статус с другого ползунка, когда слайд называется:

$(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)); 
     } 
    }); 
}); 

Answer 2

В одном обратном вызове вы определяете amount, в другом обратном вызове вы определяете years, но вы используете обе переменные в обоих обратных вызовах.

Именно поэтому вы получаете NaN, так как не все используемые переменные определены.

Answer 3

Вам нужно определить years и amount вне ваших обратных вызовов:

$(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/

Answer 4

год и сумма должна быть объявлена ​​вне.

$(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/

Answer 5

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

переменная years не существует в этой области.

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

переменная amount не существует в этой области.

Итак, если вы хотите использовать переменные years и amount для расчетов, я думаю, вы должны перенести их в глобальную область. Или внутри слайдера, вы можете получить значение years или amount от элемента, но это не совсем
Ex: https://jsfiddle.net/thaopv/e28rf6sd/

удачи.

Answer 6

temp1 использует как amount, так и years для расчета. Вы должны сделать его глобальным, чтобы работать правильно. Поскольку это общий код для обоих обратных вызовов, лучше извлечь его как отдельную функцию. Просто

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)); 
} 

и вызывайте эту функцию с каждого обратного вызова слайда. См. Обновленную скрипту http://jsfiddle.net/w0xayf7t/4/