JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>IT Help 20200618</title>
  </head>
  <body>
    <div>
      <label for="">借貸金額</label>
      <input type="number" id="loan" >
    </div>
    <div>
      <label for="">還款期</label>
      <input type="number" id="period" onblur="changePeriodText()">
    </div>
    <div>
      <label for="">指標利率</label>
      <input type="number" id="Target">
    </div>
    <div>
      <label for="">銀行利率</label>
      <input type="number" id="interest">
    </div>
    <div>
      <label for="">手續費</label>
      <input type="number" id="fee">
    </div>
    <div>
      <button onclick="caculateCost()">房貸試算</button>
    </div>
    
    <div>
      總還款金額: <span id="cost">0</span>
    </div>
    <div>
      還款年數: <span id="period_text">0</span>
    </div>
  </body>
</html>

JavaScript

function caculateCost () {
 		var inputL = document.getElementById("loan"); // 取得貸款金額
    var loan = parseFloat(inputL.value); // 將欄位內容轉成浮點數
    
    var inputP = document.getElementById("period"); // 取得還款期
    var period = parseFloat(inputP.value); // 將欄位內容轉成浮點數

    var inputT = document.getElementById("Target"); // 取得指標利率
    var Target = parseFloat(inputT.value); // 將欄位內容轉成浮點數

    var inputI = document.getElementById("interest"); // 取得銀行利率
    var interest = parseFloat(inputI.value); // 將欄位內容轉成浮點數

    var inputF = document.getElementById("fee"); // 取得手續費
    var fee = parseFloat(inputF.value); // 將欄位內容轉成浮點數

    // 若 height、weight 任一變數非數值, 即結束函式
    if(isNaN(loan) || isNaN(period)|| isNaN(Target)|| isNaN(interest)|| isNaN(fee)) 
    	return;

    // 若任一變數小於或等於 0 即結束函式
    if(loan <= 0 || period <= 0 || fee <= 0) 
    	return;

    // 將指標利率轉為百分比
    Target = Target / 100;

    // 將銀行利率轉為百分比
    interest = interest / 100;

    // 總還款金額 = 貸款金額*(1+指標利率+銀行利率)還款期次方+手續費
    document.getElementById("cost").innerHTML = loan * Math.pow(1 + Target+interest, period) + fee;
    
    document.getElementById("period_text").innerHTML = period
}

function changePeriodText () {
  var inputP = document.getElementById("period"); // 取得還款期
	var period = parseFloat(inputP.value); // 將欄位內容轉成浮點數
  
  if (isNaN(period)) {
  	period = 0;
  }
  
  document.getElementById("period_text").innerHTML = period;
}