This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| car [2026/04/04 22:56] – admin | car [2026/04/04 23:11] (current) – [Table] admin | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== | + | | Loan Amount |
| - | + | | Annual | |
| - | < | + | | Duration (Years) |
| - | # We omit ' | + | | **Monthly Payment** |
| - | fieldset "Loan Details" | + | | **Total Interest Paid** |
| - | number " | + | | **Total Cost** | ~~=round(r0c1 + r4c1, 2)~~ | |
| - | | + | |
| - | number "Duration (Years)" "5" >0 | + | |
| - | | + | |
| - | submit " | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | document.addEventListener(" | + | |
| - | var form = document.querySelector(" | + | |
| - | if (!form) return; | + | |
| - | + | ||
| - | | + | |
| - | var submitBtn = form.querySelector(" | + | |
| - | + | ||
| - | if (submitBtn) { | + | |
| - | submitBtn.addEventListener(" | + | |
| - | // 1. Prevent Bureaucracy from clearing the form | + | |
| - | e.preventDefault(); | + | |
| - | e.stopPropagation(); | + | |
| - | + | ||
| - | | + | |
| - | var inputs = form.querySelectorAll(' | + | |
| - | var p = parseFloat(inputs[0].value); | + | |
| - | var r_annual = parseFloat(inputs[1].value); | + | |
| - | var n_years = parseFloat(inputs[2].value); | + | |
| - | + | ||
| - | // 3. Calculation Logic | + | |
| - | if (p > 0 && r_annual > 0 && n_years > 0) { | + | |
| - | var r = r_annual / 100 / 12; | + | |
| - | var n = n_years | + | |
| - | var x = Math.pow(1 + r, n); | + | |
| - | var m = (p * r * x) / (x - 1); | + | |
| - | + | ||
| - | var totalPaid = m * n; | + | |
| - | var totalInterest = totalPaid - p; | + | |
| - | + | ||
| - | // 4. Inject results into the ' | + | |
| - | var display = form.querySelector(" | + | |
| - | display.innerHTML = ` | + | |
| - | <div style=" | + | |
| - | <h3 style=" | + | |
| - | < | + | |
| - | < | + | |
| - | < | + | |
| - | </ | + | |
| - | `; | + | |
| - | } else { | + | |
| - | alert(" | + | |
| - | } | + | |
| - | return false; | + | |
| - | }); | + | |
| - | } | + | |
| - | }); | + | |
| - | </ | + | |