在HTML中显示JavaScript值

Question

我希望有人能提供帮助，我是Java语言的新手，但不是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));
}

演示： 小提琴