使用帶有Javascript事件監聽器的HTML5範圍滑塊

Question

我正在嘗試構建一個HTML5滑塊貸款計算器，它使用Javascript來動態顯示和計算值。

最大的問題是，當談到Javascript時，我是個新手。

所以我有一些代碼，我正在使用顯示3個滑塊來獲得貸款的首付，利率和期限。我已經成功地獲得了滑塊的行爲，但我在計算總數時遇到了很多麻煩。我確實設置了通過簡單地將所有值傳遞給javascript的最後一個塊來計算總數，但它不會動態更新。現在我只是試圖證明我可以獲得一個範圍滑塊的值，以便在其自己的滑塊旁邊動態更新，並在我計劃顯示計算的位置下方進行更新。我嘗試過很多不同的東西，但我無法完成它的工作。

這是我目前的代碼。 http://forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/：

<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> 

這方面的一個活生生的例子可以看出？

旁邊的車輛圖像是一些選項卡式的內容。點擊財務標籤，你會看到現在的計算器。

我想盡可能保持簡單，但我只是卡住了。任何幫助將不勝感激。

謝謝 賈裏德

Answer 1

實際上，我是能夠與一些極端的試驗和錯誤來解決這個自己。

我相信有很多更好的方法可以做到這一點，但我很高興能夠正常工作。我很樂意就如何改進提供任何意見。以下是更新後的代碼：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> 

這方面的一個工作示例，可以發現？

Jared