为什么我变得“未定义”

Question

我不明白为什么这是不确定的

我尝试了多种方法来获取每个变量的值，一旦我得到了“空值”错误，这就是我的问题。

<form class="" action="index.html" method="post">
  Principal: <br>
  <input type="text" name="principal" value="" id="prin"> <br>

  Amount of Payments:<br>
  <input type="text" name="payments" value="" id="payment"> <br>

  Interest Rate: <br>
  <input type="text" name="interest" value="" id="rate">

</form>
<br>
<button type="button" name="button" id="submit" onclick="interestTot()">Calculate</button>

<div id="div1">

</div>
  </body>
</html>

let principal = document.querySelector("#principal");
let payment = document.querySelector("#payment");
let rate = document.querySelector("#rate");
let interest ;


if (document.querySelector("#principal)" != null) {
  principal = parseInt(document.querySelector('#principal').value);
};

if (document.querySelector("#payment") != null) {
  payment = parseInt(document.querySelector('#payment').value);
};

if (document.querySelector("#rate") != null) {
  rate = parseInt(document.querySelector('#rate').value);
};


function interestTot() {
  if (principal > 0) {
      interest = rate / payment;

  }
document.querySelector("#div1").innerHTML= interest
};