我正在尝试使用Javascript构建一个HTML5滑块贷款计算器，以便即时显示和计算值。
最大的问题是，当涉及到Javascript时，我是一个完整的新手。
所以我有一些代码，我用来显示3个滑块来获得预付定金，利率和贷款期限。我已经成功地让滑块完全按照我的意愿行事，但是我在计算总数方面遇到了很多麻烦。我确实设置了通过简单地将所有值传递给最后一个javascript块来计算总数，但它不会动态更新。现在我只是想证明我可以获得一个范围滑块的值，以便在其自己的滑块旁边动态更新，并在我计划显示计算的下方。我尝试了很多不同的东西，但我无法让它发挥作用。
这是我目前的代码。
<div class="clearfix" id="finance-calculator"><!-- Begin Finance Calculator -->
<div>Estimate Your Payments</div>
<div id="finance-sale-price">$<?php echo number_format(($sale_price) , 2 , '.' , ',' )?></div>
<div class="sale-price-label">Sale Price</div>
<div id="down-block">
<?php
$down_max = ceil($sale_price * 0.9);
$down_init = ceil ($sale_price * 0.2);
echo '<div class="output-label">$<output for="down_slider" id="down">' . $down_init . '</output><p class="value-label">Down Payment</p></div>';
echo '<input type="range" min="0" max="' . $down_max . '" value="' . $down_init . '" id="down-slider" step="1" oninput="outputDown(value)"/>';
?>
<div class="minimum">0%</div>
<div class="maximum">90%</div>
<script>
function outputDown(downVal) {
document.querySelector('#down').value = downVal;
}
</script>
</div>
<div id="rate-block">
<div class="output-label"><output for="rate_slider" id="rate">5.9</output>% APR<p class="value-label">Interest Rate</p></div>
<input type="range" min="0" max="12" value="5.9" id="rate-slider" step="0.1" oninput="outputRate(value)"/>
<div class="minimum">0%</div>
<div class="maximum">12%</div>
<script>
function outputRate(rateVal) {
document.querySelector('#rate').value = rateVal;
}
</script>
</div>
<div id="term-block">
<div class="output-label"><output for="term-slider" id="term">60</output> Months<p class="value-label">Loan Term</p></div>
<input type="range" min="12" max="84" value="60" id="term-slider" step="12" oninput="outputTerm(value)"/>
<div class="minimum">12 months</div>
<div class="maximum">84 months</div>
<script>
function outputTerm(termVal) {
document.querySelector('#term').value = termVal;
}
</script>
</div>
<div id="total-block">
Testing
<script>
var jdown = document.getElementById("down"); // Variable to store dynamic down payment value
jdown.addEventListener('change', function(){document.write (jdown)}, false); // Event listener to update jdown variable when slider above is used. document.write to test.
</script>
Testing
</div>
车辆图像旁边是一些标签内容。点击财务标签，您将看到当前的计算器。
我想尽量保持这一点，但我只是被卡住了。任何帮助将不胜感激。
谢谢你， 贾里德
答案 0 :(得分：0)
我实际上能够通过一些极端的试验和错误来解决这个问题。
我确信有很多更好的方法可以做到这一点，但我很高兴能让它发挥作用。我很乐意获得有关如何改进的任何意见。这是更新的代码：
<div class="clearfix" id="finance-calculator" onload="outputLoad()"><!-- Begin Finance Calculator -->
<?php
$init_payment = ((($sale_price * 0.8)*(1 + (0.059*5)))/60);
?>
<script>
function outputDown(downVal,rate,term) {
var jdown = downVal;
document.querySelector('#down').value = jdown;
var testDown = document.getElementById('testDown');
var rate = document.getElementById(rate).value;
rate = (rate * 0.01).toFixed(3);
var term = document.getElementById(term).value;
var years = (term/12);
var price = <?php echo ($sale_price) ?>;
payment.innerHTML = "$"+(((price - jdown)*(1 + (rate*years)))/term).toFixed(2);
}
function outputRate(rateVal,down,term) {
var jrate = rateVal;
document.querySelector('#rate').value = jrate;
var testRate = document.getElementById('testRate');
var down = document.getElementById(down).value;
jrate = (jrate * 0.01).toFixed(3);
var term = document.getElementById(term).value;
var years = (term/12);
var price = <?php echo ($sale_price) ?>;
payment.innerHTML = "$"+(((price - down)*(1 + (jrate*years)))/term).toFixed(2);
}
function outputTerm(termVal,down,rate) {
var jterm = termVal;
document.querySelector('#term').value = jterm;
var testTerm = document.getElementById('testTerm');
var down = document.getElementById(down).value;
var rate = document.getElementById(rate).value;
rate = (rate * 0.01).toFixed(3);
var years = (jterm/12);
var price = <?php echo ($sale_price) ?>;
payment.innerHTML = "$"+(((price - down)*(1 + (rate*years)))/jterm).toFixed(2);
}
</script>
<div>Estimate Your Payments</div>
<div><a href="#tab-2">Value Your Trade Here!</a></div>
<div id="price">$<?php echo number_format(($sale_price) , 2 , '.' , ',' )?></div>
<div class="sale-price-label">Sale Price</div>
<div id="down-block">
<?php
$down_max = ceil($sale_price * 0.9);
$down_init = ceil ($sale_price * 0.2);
?>
<div class="output-label">$<output for="down_slider" id="down"><?php echo ($down_init) ?></output><p class="value-label">Down Payment</p></div>
<input type="range" min="0" max="<?php echo ($down_max) ?>" value="<?php echo ($down_init) ?>" id="down-slider" step="1" oninput="outputDown(value,'rate','term')"/>
<div class="minimum">0%</div>
<div class="maximum">90%</div>
</div>
<div id="rate-block">
<div class="output-label"><output for="rate_slider" id="rate">5.9</output>% APR<p class="value-label">Interest Rate</p></div>
<input type="range" min="0" max="12" value="5.9" id="rate-slider" step="0.1" oninput="outputRate(value,'down','term')"/>
<div class="minimum">0%</div>
<div class="maximum">12%</div>
</div>
<div id="term-block">
<div class="output-label"><output for="term-slider" id="term">60</output> Months<p class="value-label">Loan Term</p></div>
<input type="range" min="12" max="84" value="60" id="term-slider" step="12" oninput="outputTerm(value,'down','rate')"/>
<div class="minimum">12 months</div>
<div class="maximum">84 months</div>
</div>
<div id="total-block">
<p id="payment">$<?php echo number_format(($init_payment) , 2 , '.' , ',' )?></p>
<p class="payment-label">Monthy Payment</p>
</div>
可以在以下位置找到相关的工作示例：http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/？
贾里德