如何使<script>更新平變化，而不是僅僅的onload

Question

以下<script>需要更新每個用戶改變窗體上的下列輸入時間<table id="mortgagetable">輸出：<input type="number" id="loanamount"><input type="number" id="loanamount"。

目前它只是在負載上執行此操作。

另外<div id="years" style="display:inline-block;">25 years</div>應該改變內容，當用戶移動滑塊，但它不工作？

任何幫助，將不勝感激請。

$(document).ready(function() { 
 
    $("#type :checkbox").click(function() { 
 
    $("td").parent().hide(); 
 
    $("#type :checkbox:checked").each(function() { 
 
     $("." + $(this).val()).parent().show(); 
 
    }); 
 
    }); 
 
    $("#fee :checkbox").click(function() { 
 
    $("td").parent().hide(); 
 
    $("#fee :checkbox:checked").each(function() { 
 
     $("." + $(this).val()).parent().show(); 
 
    }); 
 
    }); 
 
}); 
 

 
window.onload = function() { 
 
    document.repaymentcalc.homevalue.onchange = repayment; 
 
    document.repaymentcalc.loanamount.onchange = repayment; 
 
    document.repaymentcalc.numberpayments.onchange = repayment; 
 

 
    $('tbody tr').each(function(idx, row) { 
 
    var $row = $(row); 
 
    var initialRateCell = $row.find('td')[2]; 
 
    var repaymentCell = $row.find('td').last() 
 
    var rate = parseFloat($(initialRateCell).html()); 
 
    var repaymentVal = computeRepayment(rate); 
 
    console.log(repaymentVal) 
 
    $(repaymentCell).html(repaymentVal.repayment); 
 
    }); 
 
} 
 

 
function computeRepayment(rate) { 
 
    var x = parseInt(document.repaymentcalc.loanamount.value, 10); 
 
    var y = parseInt(rate * 100, 10)/120000; 
 
    var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12; 
 
    var h = parseInt(document.repaymentcalc.homevalue.value, 10); 
 

 
    var repayment = y * x * Math.pow((1 + y), z)/(Math.pow((1 + y), z) - 1); 
 

 
    var loantovalue = x/h * 100; 
 

 
    var year = z/12; 
 
    return { 
 
    repayment: repayment, 
 
    loantovalue: loantovalue, 
 
    year: year 
 
    } 
 
} 
 

 
function repayment(rate) { 
 
    var repaymentInfo = computeRepayment(rate); 
 
    document.getElementById("repayments").innerHTML = 'Monthly Repayment: £' + repaymentInfo.repayment.toFixed(2); 
 
    document.getElementById("ltv").innerHTML = 'Loan to Value: ' + repaymentInfo.loantovalue.toFixed(1) + '%'; 
 
    document.getElementById("years").innerHTML = repaymentInfo.year + ' years'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="type"> 
 
    <p id="Mortgage Type">Mortgage Type</p> 
 
    <input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed 
 
    <br> 
 
    <input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed 
 
    <br> 
 
    <input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed 
 
    <br> 
 
    <input type="checkbox" name="type" value="t9" id="t9" />Tracker 
 
    <br> 
 
    <input type="checkbox" name="type" value="t1" id="t1" checked/>All 
 
    <br> 
 
</section> 
 

 
<section id="fee"> 
 
    <p id="Fee">Fee</p> 
 
    <input type="checkbox" name="fee" value="f2" id="f2" />Fee 
 
    <br> 
 
    <input type="checkbox" name="fee" value="f3" id="f3" />No Fee 
 
    <br> 
 
    <input type="checkbox" name="fee" value="f1" id="f1" checked/>All 
 
    <br> 
 
</section> 
 

 
<form name="repaymentcalc" action=""> 
 
    </br> 
 
    <p> 
 
    Home Value £ 
 
    <input type="number" id="homevalue" value="250000" style="width: 75px"> 
 
    </p> 
 

 
    <p> 
 
    Loan Amount £ 
 
    <input type="number" id="loanamount" value="200000" style="width: 75px"> 
 
    </p> 
 

 
    Term 
 
    <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px"> 
 
    <div id="years" style="display:inline-block;">25 years</div> 
 

 
    <p> 
 
    <div id="ltv">Loan to Value: 80.0%</div> 
 

 
    </div> 
 
</form> 
 

 
<br> 
 

 
<div id="mortgagediv"> 
 
    <table id="mortgagetable"> 
 
    <thead> 
 
     <tr class="productheader"> 
 
     <th class="lender">Lender</th> 
 
     <th class="type">Type</th> 
 
     <th class="inititalrate">Initial Rate (%)</th> 
 
     <th class="svr">SVR (%)</th> 
 
     <th class="apr">Overall APR (%)</th> 
 
     <th class="fee">Fee (£)</th> 
 
     <th class="ltv">LTV (%)</th> 
 
     <th class="repayment">Monthly Repayment (£)</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t2">2yr Fixed</td> 
 
     <td class="tg-031e">1.64</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">70</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t3">3yr Fixed</td> 
 
     <td class="tg-031e">1.69</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">75</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t5">5yr Fixed</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t9">Tracker</td> 
 
     <td class="tg-031e">1.64</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">70</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t2">2yr Fixed</td> 
 
     <td class="tg-031e">1.69</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">75</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t3">3yr Fixed</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t5">5yr Fixed</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t9">Tracker</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

試試這個：

$(document).ready(function() { 
 
    $("#type :checkbox").click(function() { 
 
    $("td").parent().hide(); 
 
    $("#type :checkbox:checked").each(function() { 
 
     $("." + $(this).val()).parent().show(); 
 
    }); 
 
    }); 
 
    $("#fee :checkbox").click(function() { 
 
    $("td").parent().hide(); 
 
    $("#fee :checkbox:checked").each(function() { 
 
     $("." + $(this).val()).parent().show(); 
 
    }); 
 
    }); 
 
}); 
 
var repayment = function() { 
 

 
}; 
 
window.onload = function() { 
 
    document.repaymentcalc.homevalue.onchange = repayment; 
 
    document.repaymentcalc.loanamount.onchange = repayment; 
 
    document.repaymentcalc.numberpayments.onchange = function() { 
 
     $('#years').html(this.value + ' years'); 
 
    }; 
 
    makeSomething(); 
 
}; 
 

 
function makeSomething() { 
 
    $('tbody tr').each(function(idx, row) { 
 
    var $row = $(row); 
 
    var initialRateCell = $row.find('td')[2]; 
 
    var repaymentCell = $row.find('td').last() 
 
    var rate = parseFloat($(initialRateCell).html()); 
 
    var repaymentVal = computeRepayment(rate); 
 
    $(repaymentCell).html(repaymentVal.repayment); 
 
    }); 
 
} 
 
$("#myForm :input").change(function() { 
 
    makeSomething(); 
 
}); 
 

 
function computeRepayment(rate) { 
 
    var x = parseInt(document.repaymentcalc.loanamount.value, 10); 
 
    var y = parseInt(rate * 100, 10)/120000; 
 
    var z = parseInt(document.repaymentcalc.numberpayments.value, 10) * 12; 
 
    var h = parseInt(document.repaymentcalc.homevalue.value, 10); 
 

 
    var repayment = y * x * Math.pow((1 + y), z)/(Math.pow((1 + y), z) - 1); 
 

 
    var loantovalue = x/h * 100; 
 

 
    var year = z/12; 
 
    return { 
 
    repayment: repayment, 
 
    loantovalue: loantovalue, 
 
    year: year 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section id="type"> 
 
    <p id="Mortgage Type">Mortgage Type</p> 
 
    <input type="checkbox" name="type" value="t2" id="t2" />2yr Fixed 
 
    <br> 
 
    <input type="checkbox" name="type" value="t3" id="t3" />3yr Fixed 
 
    <br> 
 
    <input type="checkbox" name="type" value="t5" id="t5" />5yr Fixed 
 
    <br> 
 
    <input type="checkbox" name="type" value="t9" id="t9" />Tracker 
 
    <br> 
 
    <input type="checkbox" name="type" value="t1" id="t1" checked/>All 
 
    <br> 
 
</section> 
 

 
<section id="fee"> 
 
    <p id="Fee">Fee</p> 
 
    <input type="checkbox" name="fee" value="f2" id="f2" />Fee 
 
    <br> 
 
    <input type="checkbox" name="fee" value="f3" id="f3" />No Fee 
 
    <br> 
 
    <input type="checkbox" name="fee" value="f1" id="f1" checked/>All 
 
    <br> 
 
</section> 
 

 
<form name="repaymentcalc" id="myForm" action=""> 
 
    </br> 
 
    <p> 
 
    Home Value £ 
 
    <input type="number" id="homevalue" value="250000" style="width: 75px"> 
 
    </p> 
 

 
    <p> 
 
    Loan Amount £ 
 
    <input type="number" id="loanamount" value="200000" style="width: 75px"> 
 
    </p> 
 

 
    Term 
 
    <input type="range" id="numberpayments" value="25" min="1" max="40" style="width: 100px"> 
 

 
    <div id="years" style="display:inline-block;">25 years</div> 
 

 
    <p> 
 

 
    <div id="ltv">Loan to Value: 80.0%</div> 
 

 
    </div> 
 
</form> 
 

 
<br> 
 

 
<div id="mortgagediv"> 
 
    <table id="mortgagetable"> 
 
    <thead> 
 
     <tr class="productheader"> 
 
     <th class="lender">Lender</th> 
 
     <th class="type">Type</th> 
 
     <th class="inititalrate">Initial Rate (%)</th> 
 
     <th class="svr">SVR (%)</th> 
 
     <th class="apr">Overall APR (%)</th> 
 
     <th class="fee">Fee (£)</th> 
 
     <th class="ltv">LTV (%)</th> 
 
     <th class="repayment">Monthly Repayment (£)</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t2">2yr Fixed</td> 
 
     <td class="tg-031e">1.64</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">70</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t3">3yr Fixed</td> 
 
     <td class="tg-031e">1.69</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">75</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t5">5yr Fixed</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t9">Tracker</td> 
 
     <td class="tg-031e">1.64</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f3"></td> 
 
     <td class="tg-031e">70</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t2">2yr Fixed</td> 
 
     <td class="tg-031e">1.69</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">75</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t3">3yr Fixed</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t5">5yr Fixed</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
     <tr class="product"> 
 
     <td class="tg-031e">Nationwide</td> 
 
     <td class="t1 t9">Tracker</td> 
 
     <td class="tg-031e">1.79</td> 
 
     <td class="tg-031e">3.99</td> 
 
     <td class="tg-031e">3.40</td> 
 
     <td class="f1 f2">999</td> 
 
     <td class="tg-031e">80</td> 
 
     <td class="tg-031e"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>