HTML에서 자바 스크립트 값 표시

Question

누군가가 도울 수 있기를 바란다. Javascript는 처음 사용하지만 HTML/CSS는 처음 사용하기를 원합니다. 내 HTML 페이지에 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