Why am I getting NaN as a result here [closed]

I am trying to create a yearly salary calculator using HTMl and Javascript for an assignment, however whenever I try to call my function to replace the innerHTMl, it flashes NaN for a second and then goes back to the original HTML. I was wondering if anyone knew what is going on and how to potentially fix it.

function calcSalary() {
  var wage = document.getElementById('hourly').value;
  var wage2 = parseInt(wage.value);
  var hours = document.getElementById('week').value;
  var hours2 = parseInt(hours.value);

  var calculate = wage2 * hours2 * 52;
  document.getElementById('output').innerHTML = calculate;
}
<!DOCTYPE html>
<html>

<head>
  <title>Colin's Resume</title>
  <link rel="stylesheet" href="externalstyle1.css">
</head>

<body>
  <div class="divone">
    <h1>Colin Rooney's Resume</h1>
  </div>
  <div class="divtwo">
    <br>
    <div class="divthree">
      <p>My Skills</p>
      <br>
      <div class="divfour">
        <h2>Other Pages</h2>
        <a href="https://www.albany.edu/~cr897544/myexternal1.html/">My Work Experience</a>
        <a href="https://www.albany.edu/~cr897544/myexternal2.html/">My Education</a>
      </div>
      <div class="divfive">
        <h1>Salary Calculator</h1>
        <form name="myform">
          <label for="hourly">Hourly Rate:</label>
          <input type="text" id="hourly"><br><br>
          <label for="week">Hours Per Week:</label>
          <input type="text" id="week"><br><br>
          <button onclick="calcSalary()">Calculate</button>
        </form>
      </div>
      <div class="divsix">
        <p id="output">Output Here</p>
      </div>
      <div>
        <p>.</p>
        <a href="mailto:[email protected]/">Send me an eMail!</a>
      </div>
    </div>
  </div>
</body>

</html>