住宅ローン月々返済額シミュレーター

<div class="d10-13-12-panel">
          <p class="d10-13-12-title">住宅ローン返済シミュレーター</p>
          <p class="d10-13-12-amount">借入額 <span id="d1788Amt">4,000</span>万円</p>
          <input type="range" class="d10-13-12-range" id="d1788Range" min="1000" max="8000" step="100" value="4000">
          <div class="d10-13-12-result">
            <span class="d10-13-12-label">月々の目安返済額</span>
            <span class="d10-13-12-value" id="d1788Val">¥111,000</span>
          </div>
        </div>

.d10-13-12{padding:18px}
        .d10-13-12-panel{width:100%;max-width:260px}
        .d10-13-12-title{margin:0 0 10px;font-size:12px;font-weight:700;color:#334;text-align:center}
        .d10-13-12-amount{margin:0 0 10px;font-size:12px;color:#556;text-align:center}
        .d10-13-12-amount span{font-size:16px;font-weight:800;color:#2f7fef}
        .d10-13-12-range{width:100%;accent-color:#2f7fef;margin-bottom:14px}
        .d10-13-12-result{background:#f2f6f9;border-radius:10px;padding:12px;text-align:center}
        .d10-13-12-label{display:block;font-size:10.5px;color:#889;margin-bottom:4px}
        .d10-13-12-value{display:block;font-size:19px;font-weight:800;color:#1f2a37}

(function(){
        var root=document.currentScript.closest('.item').querySelector('.d10-13-12');
        var range=root.querySelector('#d1788Range');
        var amt=root.querySelector('#d1788Amt');
        var val=root.querySelector('#d1788Val');
        function calc(){
          var man=parseInt(range.value,10);
          amt.textContent=man.toLocaleString('ja-JP');
          var principal=man*10000;
          var monthlyRate=0.015/12;
          var n=35*12;
          var payment=principal*monthlyRate/(1-Math.pow(1+monthlyRate,-n));
          val.textContent='¥'+Math.round(payment).toLocaleString('ja-JP');
        }
        range.addEventListener('input',calc);
        calc();
      })();