在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