在html中顯示javascript值

Question

我希望有人可以幫忙，我是Javascript新手，但不是HTML/CSS。我有一個小問題，試圖在我的HTML頁面上顯示一些Javascript值。因此，簡而言之：

我有兩個表單範圍滑塊，這些輸入的值然後使用JavaScript來計算包括興趣在內的總數（這是一個貸款計算器）。但是我需要的是在的形式，以便底部顯示的總和：

借款金額[值] +利息[值] =總償還[值]

予需要此更新的值，因爲它們滑動輸入範圍，我不能讓用戶點擊一個按鈕。

這裏是我的JS：

<script type="text/javascript"><!-- 
function updatesum() { 
document.form.sum.value = (document.form.borrow.value -0 + 5.5)/100 * 
(document.form.duration.value -0) + (document.form.borrow.value -0 + 5.5); 
} 
//--></script> 

我的HTML：

<form name="form" class="form"> 
    <label for="borrow">How much would you like to <span>borrow</span>?</label> 
    <input type="range" name="borrow" id="borrow" value="150" min="1" max="400" onChange="updatesum()" style="color: #1271a9;"> 

    <label for="duration">How <span>long</span> for?</label> 
    <input type="range" name="duration" id="duration" value="18" min="1" max="38" onChange="updatesum()" style="color: #1271a9;"> 
    <label>Total Repayable:</label> 
    <input name="sum" readonly style="color: #1271a9; font-weight: bold;"> 
    <p class="sum">Borrowing <div id="sumBorrow"><span>[sum]</span></div> + Interest & fees <span name="duration">[sum]</span> = Total to repay <span name="sum">[sum]</span></p> 
    </form> 

Answer 1

您可以使用jQuery和一些小的HTML改變

<form name="form" class="form"> 
    <label for="borrow">How much would you like to <span>borrow</span>?</label> 
    <input type="range" name="borrow" id="borrow" value="150" min="1" max="400" onChange="updatesum()" style="color: #1271a9;" /> 
    <label for="duration">How <span>long</span> for?</label> 
    <input type="range" name="duration" id="duration" value="18" min="1" max="38" onChange="updatesum()" style="color: #1271a9;" /> 
    <label>Total Repayable:</label> 
    <input name="sum" id="sum" readonly style="color: #1271a9; font-weight: bold;" /> 
    <p class="sum">Borrowing 
     <div id="sumBorrow"><span class="amount">[sum]</span> 
     </div>+ Interest & fees <span class="interest">[sum]</span> = Total to repay <span class="total">[sum]</span> 
    </p> 
</form> 

然後

function updatesum() { 
    var amount = +$('#borrow').val() || 0, 
     duration = +$('#duration').val() || 0, 
     interest = (amount + 5.5)/100 * duration, 
     payable = interest + (amount + 5.5); 
    $('#sum').val(payable.toFixed(2)); 
    $('.amount').text(amount.toFixed(2)); 
    $('.interest').text(interest.toFixed(2)); 
    $('.total').text(payable.toFixed(2)); 
} 

演示：Fiddle