将 HTML5 范围滑块与 Javascript 事件侦听器一起使用
Using HTML5 range sliders with Javascript Event Listener
我正在尝试构建一个 HTML5 滑块贷款计算器，使用 Javascript 来动态显示和计算值。
最大的问题是，在 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>
可以在以下位置看到一个活生生的例子：http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/?
车辆图片旁边是一些带标签的内容。单击财务选项卡，您将看到当前的计算器。
我试图让这个尽可能简单，但我只是被卡住了。任何帮助将不胜感激。
谢谢，
贾里德
我实际上能够通过一些极端的试验和错误自己解决这个问题。
我相信有很多更好的方法可以做到这一点，但我很高兴它能正常工作。我很乐意就如何改进这一点获得任何意见。这是更新后的代码：
<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/?
贾里德
我正在尝试构建一个 HTML5 滑块贷款计算器，使用 Javascript 来动态显示和计算值。
最大的问题是，在 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>
可以在以下位置看到一个活生生的例子：http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/?
车辆图片旁边是一些带标签的内容。单击财务选项卡，您将看到当前的计算器。
我试图让这个尽可能简单，但我只是被卡住了。任何帮助将不胜感激。
谢谢， 贾里德
我实际上能够通过一些极端的试验和错误自己解决这个问题。
我相信有很多更好的方法可以做到这一点，但我很高兴它能正常工作。我很乐意就如何改进这一点获得任何意见。这是更新后的代码：
<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/?
贾里德