My math is wrong, calculate returns NaN after 1st attempt, and select button wont return other values besides 10


#1

Okay i figured out why my math is wrong but now my select tag options wont change the value of my code :hushed:
edit: Nope my math is still wrong D:
Whenever i click the calculate button twice, it returns NaN.

window.onload = bgColor;
setInterval(bgColor, 2500);
function bgColor(){
  var rgb1 = Math.floor(Math.random() * Math.floor(255));
  var rgb2 = Math.floor(Math.random() * Math.floor(255));
  var rgb3 = Math.floor(Math.random() * Math.floor(255));
  document.body.style.backgroundColor = "rgb(" + rgb1 + ',' + rgb2 + ',' + rgb3 + ')';
  }

function calculate(){
  n = parseFloat(years) * 12;
  iR = parseFloat(iR.value) / 12;
  m = (parseFloat(homeCost.value)) * (((parseFloat(iR)) / 100) * (Math.pow(1 + ((parseFloat(iR)) / 100), n))) / (1 + ((parseFloat(iR)) / 100) * n - 1);
  monthlyField.innerHTML = parseInt(m);
  console.log(iR);
}
let homeCost, iR, years, m, n;
homeCost = document.querySelector("#homeCost");
iR = document.querySelector("#iR");
years = document.querySelector("#years").value;
monthlyField = document.querySelector("#monthly");

document.querySelector("#button").addEventListener("click", calculate);
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Mortgage Calculator</title>
  <link rel="stylesheet" type="text/css" href="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\mortgageCalculator.css">
</head>
<body>
  <form>
    <h1>Mortgage Calculator</h1>
    <label for="homeCost">Home Cost: </label><input id="homeCost" type="text"><label for="homeCost"> $</label>
    <br>
    <br>
    <label for="iR">Interest Rate: </label><input id="iR" type="text"><label for="iR"> %</label>
    <br>
    <p>Mortgage Period: </p>
    <select id="years">
      <option value="10">10 Years</option>
      <option value="15">15 Years</option>
      <option value="30">30 Years</option>
    </select>
    <button type="button" value="enter" id="button">Calculate</button>
    <h1>Monthly Payment:</h1>
    <h1 id="monthly"></h1>
  </form>
  <script src="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\mortgageCalculator.js" type="text/javascript"></script>
</body>

#2

lets say the interest rate is 10%, then this line:

iR = parseFloat(iR.value) / 12;

when called for a second time, iR will be 10:

iR = parseFloat(10.value) / 12

which will return NaN, given 10 doesn’t have value property.

the problem with that line is that iR will update the global variable defined here:

iR = document.querySelector("#iR");