JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<section id="section-1" class="section-1 tinh-lai-suat">
	<div class="ki-han-gui">
		Kì hạn gửi: <input type="text" name="kyHanGui" /> tháng
		<button class="nut-xong">Xong</button>
		<br />
	</div>
	<div class="thang-gui">
		Các tháng gửi:
		<br />
		<div class="danh-sach-thang-gui-vao"></div>
	</div>
	<div class="lai-suat-niem-yet">
		Lãi suất niêm yết (%/năm): <input type="text" value="0.00" name="laiSuatNiemYet" />
	</div>
	<div class="button-action">
		<button class="nut-tinh">Tính</button>
	</div>
	<div class="ket-qua">
		Tổng tiền lãi:
		<span></span>
	</div>
</section>

JavaScript

// Tính lãi suất gửi góp tiếp kiệm hàng tháng
! function($) {
  $(document).ready(function() {
    /* --------------------------------------------------------------------- */
    /* .tinh-lai-suat
    /* --------------------------------------------------------------------- */
    (function() {
      if ($('.tinh-lai-suat').length) {
        $('.nut-xong').on('click', function(){
          $('.danh-sach-thang-gui-vao').empty();
          var kyHanGui = parseInt($('[name=kyHanGui]').val());
          for (var i = 1; i <= kyHanGui; i++) {
            $('.danh-sach-thang-gui-vao').append('- Tháng thứ ' + i + ': <input type="text" name="thangThu'+ i +'">' + '<br />');
          }
        });

        $('.nut-tinh').on('click', function(){
          $('.ket-qua span').empty();
          var kyHanGui = parseInt($('[name=kyHanGui]').val());
          var laiSuatNiemYet = parseFloat($('[name=laiSuatNiemYet]').val());
          var kyHanGuiDaoNguoc = kyHanGui;
          var tienLai = 0;
          for (var i = 1; i <= (kyHanGui); i++) {
            var tienGuiTungThang = $('input[name^="thangThu'+ i +'"]').val();
            if(tienGuiTungThang === "") {
              tienGuiTungThang = 0;
            }
            tienGuiTungThang = parseFloat(tienGuiTungThang);
            console.log(tienGuiTungThang);
            var tienLai = tienLai + tienGuiTungThang * (laiSuatNiemYet/100) * (kyHanGuiDaoNguoc/12);
            kyHanGuiDaoNguoc--;
          }
          $('.ket-qua span').html(tienLai);
          
          console.log(tienLai);
        });

      }
    })();

  });
}(jQuery);