创建一个带有html滑块的抵押计算器，该滑块可以在javascript中对其他变量求和

我有个问题

我需要创建一个抵押计算器，但它特别复杂，因为我需要将其他变量和抵押付款相加。 请查看我正在制作的WIP网站：

正如你所看到的，我有一笔抵押贷款，在复选框中有一些“加号”。 基本上我有三个问题：

我不知道为什么我的抵押贷款付款从NaN开始，但我需要从一个精确的数字开始（可能是最大抵押贷款付款），正如你所看到的那样，你使用滑块并将第一个设置为最大

在使用滑块并单击其中一个复选框后，复选框的价格不等于抵押贷款付款，但会将其删除。我需要把支票和抵押贷款的金额相互交换

是否可以将滑块值

min

和

max

设置为百分比？像这样：

下面是要检查的干净代码：

//复选框价格
var basicPrice=0；//这就是我们的开始
$（文档）.on（'change'，'input[type=checkbox]'，getCheck）；
函数getCheck（）{
var currentPrice=basicPrice；//每次
当前价格=基本价格，
正=[]，
总数=0；
console.log（当前价格）
$（“输入[type=checkbox]”）。每个（函数（i，el）{
如果（$（el）.is（“：选中”））{
total+=parseInt（$（el）.val（））；
控制台日志（总计）；
//更新：
plus.push（$（el.data（'name'））；//获取标签文本
}
});
$（“#plus display”）.html（plus.join（“，”）；
$（'#rata-display-2'）.html（总计）；
$（'#rata-display-1'）.html（总计）；
}
//滑块
$（文档）.ready（函数（）{
var zzz=document.getElementById（'aaa'）.innerText；
document.getElementById（'slider1'）。max=zzz；
});
常量$mutuo=$（“#mutuo”），
$rata=$（“#rata-display-2”），
$anni=$（“#anni”），
$slider1=$（“#slider1”），
$slider2=$（“#slider2”），
$max=$（“#aaa”）.html（）；
函数showAmount1（newAmount）{
document.getElementById（'mutuo'）。innerHTML=newAmount；
$mutuo.val（$（“#mutuo”）.innerHTML）；
更新（）；
}
函数showAmount2（newAmount）{
document.getElementById（'anni'）。innerHTML=newAmount；
$anni.val（$（“#anni”）.innerHTML）；
更新（）；
}
函数更新（）{
设利息为nnuo=1.60，
C=$mutuo.html（），
anni=$anni.html（），
i=利息nnuo/12/100，
n=anni*12，
rata=C*i/（1-数学功率（1+i，-n））；
$rata.html（rata.toFixed（0）+“欧元”）；
}
更新（）

100000



加：显示复选框名称的位置
内饰套装
+25欧元
Sicurezza Domotica
‍+7欧元的al-mese
安全增强版
‍+9欧元al-mese
情感
‍‍+15欧元al-mese
框自动
‍‍+123欧元al-mese
ASCICURAZIONE
‍+4欧元的al-mese
健康
‍‍+45欧元al-mese
户外包装
‍+36欧元




斯凯利L'；德尔穆托进口：
20%
斯凯利·杜拉塔·德尔·穆托：
10




有几件事

不要在let和const中使用逗号-如果您有全局变量，请在on ready中初始化它们-注意，我现在也在那里调用update
确保您的值不是字符串（+如果字符串是数字，字符串将转换为数字）
坚持使用$
user.text（）和not.val对于容器，val用于输入字段
我不知道你在用这段代码做什么——dom、val和innerHTML的混合非常糟糕
滑块上的ID重复
这是一个改进的版本


var$mutuo、$rata、$anni、$slider1、$slider2、$max；//如果全局使用，则将其设置为全局
//复选框价格
var basicPrice=0；//这就是我们的开始
$（文档）.on（'change'，'input[type=checkbox]'，getCheck）；
函数getCheck（）{
var currentPrice=basicPrice，//每次
正=[]，
总数=0；
$（“输入[type=checkbox]”）。每个（函数（i，el）{
如果（$（el）.is（“：选中”））{
total+=parseInt（$（el）.val（））；
控制台日志（总计）；
//更新：
plus.push（$（el.data（'name'））；//获取标签文本
}
});
$（“#plus display”）.html（plus.join（“，”）；
$rata.文本（总计）；
$（'#rata-display-1'）.html（总计）；
}
//滑块
$（文档）.ready（函数（）{
var zzz=parseInt（$（'#aaa'）.text（）；
$（'#slider1'）.attr（“max”，zzz）；
$mutuo=$（“#mutuo”）；
$rata=$（“#rata-display-2”）；
$anni=$（“#anni”）；
$slider1=$（“#slider1”）；
$slider2=$（“#slider2”）；
$max=$（“#aaa”）.html（）；
更新（）；
$（“.slider”）.on（“更改”，函数（）{
更新（）；
$mutuo.text（$（“#slider1”）.val（））；
$anni.text（$（“#slider2”）.val（））；
})
});
函数更新（）{
设利息为nnuo=1.60；
设C=+$mutuo.text（）|| 0；
设anni=+$anni.text（）|| 0
设i=利息nnuo/12/100；
设n=anni*12；
设rata=C*i/（1-数学功率（1+i，-n））；
$rata.html（rata.toFixed（0）+“欧元”）；
}

100000



加：显示复选框名称的位置
内饰套装
+25欧元
Sicurezza Domotica
‍+7欧元的al-mese
安全增强版
‍+9欧元al-mese
情感
‍‍+15欧元al-mese
框自动
‍‍+123欧元al-mese
ASCICURAZIONE
‍+4欧元的al-mese
健康
‍‍+45欧元al-mese
户外包装
‍+36欧元




斯凯利L'；德尔穆托进口：
20%
斯凯利·杜拉塔·德尔·穆托：
10




0€










请修复所有控制台错误。您在
表单rata、anni、mutuo上有错误-顺便问一下，为什么要混合jQuery和DOM？而且
$rata.html（rata.toFixed（0）+“€”后面不应该有逗号
function showAmount1(newAmount) {
   document.getElementById('mutuo').innerHTML = newAmount;
   $mutuo.val($("#mutuo").innerHTML);
   update();
}