在html中显示javascript值
我希望有人能帮上忙,我不熟悉Javascript,但不熟悉HTML/CSS。我在HTML页面上显示一些Javascript值时遇到了一个小问题。简言之: 我有两个表格范围滑块,从这些输入值,然后使用JavaScript计算出包括利息在内的总额(这是一个贷款计算器)。但是,我需要在表单底部显示总和,以便: 借款金额[价值]+利息[价值]=偿还总额[价值] 我需要它来更新值,因为它们正在滑动输入范围,我不能让用户需要单击按钮 这是我的JS:在html中显示javascript值,javascript,jquery,html,Javascript,Jquery,Html,我希望有人能帮上忙,我不熟悉Javascript,但不熟悉HTML/CSS。我在HTML页面上显示一些Javascript值时遇到了一个小问题。简言之: 我有两个表格范围滑块,从这些输入值,然后使用JavaScript计算出包括利息在内的总额(这是一个贷款计算器)。但是,我需要在表单底部显示总和,以便: 借款金额[价值]+利息[价值]=偿还总额[价值] 我需要它来更新值,因为它们正在滑动输入范围,我不能让用户需要单击按钮 这是我的JS: <script type="text/javascr
<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>
你想借多少钱?
多长时间?
应偿还总额:
借款[总额]+利息和费用[总额]=偿还总额[总额]
您可以使用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>
演示:看起来不错,我需要将标记中的“[sum]”更新为输入中的值,这是我似乎无法使用的部分。你可以使用jQuery,对吗?是的,我可以,特别是如果它能够工作的话;)看见
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));
}