如何停止每次都获得“ 0”输出？

Question

我正在尝试制作一个简单的兴趣计算器，但是兴趣一直回到0。我在网上看了一下，却一无所获。我的控制台也什么也没说。这是代码：

       <form>
         <div class="form-group">
           <input autocomplete="off" id="pInput" class="form-control form-control-lg" 
                 placeholder="Enter Principal..." 
                 onfocus="this.placeholder = ''"
                 onblur="this.placeholder = 'Enter Principal...'"><br><br>
           <input autocomplete="off" id="rInput" class="form-control form-control-lg" 
                 placeholder="Enter Rate..." 
                 onfocus="this.placeholder = ''"
                 onblur="this.placeholder = 'Enter Rate...'"><br><br>
           <input autocomplete="off" id="tInput" class="form-control form-control-lg" 
                 placeholder="Enter Time..." 
                 onfocus="this.placeholder = ''"
                 onblur="this.placeholder = 'Enter Time...'">
        </div>
      </form>

      <br><br>

      <button onclick="calculate()">Calculate</button>        
      <div id="output">
        <div class="card card-primary mb-2">
          <div class="card-block">
            <h4>Interest:</h4><br>
            <div id="interest"></div>
          </div>
        </div>
      </div> 

<script>
  var p = document.getElementById("pInput").value;
  var r = document.getElementById("rInput").value/100;
  var t = document.getElementById("tInput").value;
  var i = p*r*t;

  function calculate() {
    document.getElementById("interest").innerHTML = i;
  }  
</script>

---