Problems converting a NaN value in Javascript

Question

I'd just started learning Javascript and one of my first projects is to build a site that gets values from an input box and use them to get the area of a circle but I keep getting NaN as a result

My code looks like this:

let circle = document.getElementById("rCircle");
let radius = circle.value;
const calcAreaCircle = (radius) => {
    let circleResult = Math.PI * Math.pow(radius, 2);
    circleArea.innerHTML = ("The area is: " + circleResult)
};

Additional info - I have already tried converting the NaN using parseInt as let radius = parseInt(circle.value). Also I keep getting NaN in the console unless the code is wrapped in a window.onload function.

Does anybody know what am I missing??

*Edit

This is part of my html

<div class="imageContainer">
    <h4>Circles</h4>
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div>
    <div class="text">
      <p>Tell me the radius</p>
      <input type="number" name="" value="" placeholder="Raduis" id="rCircle">
      <button id="calcCircle">Get area</button>
    </div>
    <p id="circleArea"></p>
</div>

Answer 1

function check() {
    let circle = document.getElementById("rCircle");
    let circleArea = document.getElementById("circleArea");
    let radius = circle.value;
    let circleResult = Math.PI * Math.pow(parseInt(radius), 2);
    circleArea.innerHTML = ("The area is: " + circleResult)
}

<div class="imageContainer">
    <h4>Circles</h4>
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div>
    <div class="text">
      <p>Tell me the radius</p>
      <input type="number" name="" value="" placeholder="Raduis" id="rCircle">
      <button id="calcCircle" onclick="check()">Get area</button>
    </div>
    <p id="circleArea"></p>
</div>