javascript - 我需要将贷款计算器从滑块之一更改为输入文本框
问题描述
我有一个可以正常工作的贷款计算器,直到我将其中一个滑块更改为输入框。当我更改 javascript 中的属性时,它只是不起作用。我想知道如何使我的 js 部分中的输入有效。正如我的客户想要的那样,它变成了一个文本框。
这是我的 HTML 代码片段:
<div class="loan-calculator" style="padding-bottom: 1px;">
<div class="loan-calculator__controls-list">
<div class="loan-calculator__control loan-calculator-control">
<span class="loan-calculator-control__caption">My Spendings: <b>RM <span data-money-range-value></span></b></span>
<!-- <div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--money" data-money-range-slider></div> -->
<input type="number" class="form-control" placeholder="Spendings" aria-label="spendings" spendings-input>
<div class="loan-calculator-control__help-values">
<div class="loan-calculator-control__min-value">Min Spendings: RM 0</div>
<div class="loan-calculator-control__max-value">Maximum Spendings: RM 10,000+</div>
</div>
</div>
<div class="loan-calculator__control loan-calculator-control">
<span class="loan-calculator-control__caption">Merchant: <b><span data-months-range-value>3</span> <span data-months-range-measure></span></b></span>
<div class="loan-calculator-control__range loan-calculator-range-slider loan-calculator-range-slider--months" data-months-range-slider></div>
<div class="loan-calculator-control__help-values">
<div class="loan-calculator-control__min-value">Min Percentage: 0%</div>
<div class="loan-calculator-control__max-value">Maximum Percentage: 200%</div>
</div>
</div>
</div>
</div>
这是我的滑块 JavaScript:
var moneyRangeSliderElem = document.querySelector("[spendings-input]");
var moneyRangevalueElem = document.querySelector("[data-money-range-value]");
var monthsRangeSliderElem = document.querySelector(
"[data-months-range-slider]"
);
var monthsRangeValueElem = document.querySelector("[data-months-range-value]");
var monthsRangeMeasureElem = document.querySelector(
"[data-months-range-measure]"
);
var resultValueElem = document.querySelector("[data-result-value]");
// noUiSlider.create(moneyRangeSliderElem, {
// start: [5000],
// step: 1,
// connect: [true, false],
// format: wNumb({
// decimals: 0
// }),
// range: {
// min: 0,
// max: 10000
// }
// });
noUiSlider.create(monthsRangeSliderElem, {
start: [30],
step: 1,
connect: [true, false],
format: wNumb({
decimals: 0
}),
range: {
min: 1,
max: 200
}
});
function calcPayment() {
var moneyValue = parseInt(moneyRangeSliderElem, 10);
var monthsValue = parseInt(monthsRangeSliderElem.noUiSlider.get(), 10);
console.log(-pmt(0.24/12, monthsValue, moneyValue))
resultValueElem.textContent = numberFormatter.format(
moneyValue * monthsValue * 0.01
);
}
moneyRangeSliderElem.on("input", function(values, handle) {
moneyRangevalueElem.textContent = numberFormatter.format(values[handle]);
calcPayment();
});
monthsRangeSliderElem.noUiSlider.on("update", function(values, handle) {
monthsRangeValueElem.textContent = values[handle];
monthsRangeMeasureElem.textContent = wordForm(values[handle], [
"%",
"%",
"%"
]);
calcPayment();
});
解决方案
所以你有两个滑块 - 一个用于金钱,另一个用于几个月?
推荐阅读
- barcode - 这是什么类型的条形码散列/加密
- vim - NeoVim 插件未安装。(使用 vim 插件)
- javascript - 我的 shuffle 函数以单数形式工作,但是当将多个调用组合成一个函数时,它会中断
- scala - 当你可以使用可变类型的 val 时,为什么还要使用 var 呢?
- javascript - 如何从 Javascript 显示和生成 XML
- c# - 如何通过 API 传递三个参数并相应地检索信息
- r - 在R中提取具有同时出现的字母的单词
- c# - 如果托管在 IIS 上,ASP.NET 核心应用程序不会使用来自 RabbitMQ 队列的消息
- python - Python Pip“启动器中的致命错误”和更新 pip 的其他问题
- asp.net - 在 asp .net、IIS 8 环境中使用目录服务出现未知错误 (0x80005000)