<div> contents not updating on jquery output

Question

In my code I have this div: <div id="ltv">Loan to Value: 80.0%</div> .

The text content is meant to change as the inputs on:

<input type="number" id="loanamount" value="200000" style="width: 75px">

and

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

are updated. This doesn't work and I cannot see why? The <script> should do this, but it is not parsing through?

Any help would be much appreciated please :)

 $(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.toFixed(2), 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>

Answer 1

Everything is working as expected, you are missing the code where you update #ltv 's content. Take a look at the snippet I included, I wrote a comment about the statement that should be included for the #ltv element to update its content.

 $(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; /* Add this line below, adjust toFixed(n) * where n is the number of decimals you want to show */ $('#ltv').text('Loan to Value: ' + loantovalue.toFixed(2) + '%'); var year = z / 12; return { repayment: repayment.toFixed(2), 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>