(JavaScript) Find the Area of a Circle From User Input Box

Alright, so I am trying to figure out what I am doing wrong here and would love for someone to help me in the right direction.

I will have all the code below. As well as on CodePen if that helps here

I am looking to make a simple HTML page, where:

Function finds the area of a circle
The formula should be π (pi) r squared, right? or is it Math.PI?
Use π as the constant
The user will enter their first name in a textbox
The user will enter the radius from the second textbox
Calculate the area of a circle.
Concatenate the user's first name, a message, and the area of the circle and output all of that into the document. Thank you so much for anyone who can help me with this, I have been stuck on this all day, and could use some help. Even if not the answer, just someone who could point me in the right direction, or what I am doing wrong? Thank you all.

function changeText() {
             var firstName = document.getElementById("fNameBox").value;
             var message = ", The area of your circle \"is\"";
             const radius1 = circleRadius + " " + Math.PI;
             var result = firstName.toUpperCase() + message + radius1;
        document.getElementById("message").innerHTML = (result);
      }

      function clearText() {
        document.getElementById("message").innerHTML = "<br>";
        document.getElementById("fNameBox").value = "";
        document.getElementById("wageBox").value = "";
      }

body {
        background-color: antiquewhite;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        text-align: center;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        text-decoration: underline;
      }

      span {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        font-style: italic;
      }

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Program 4</title>
  </head>
  <body>
    <div id="main">
      <div id="header">
        <h1>Program 4</h1>
        <span>An Expression using a Constant</span>
      </div>
      <br /><br />
      <form id="myForm">
        First Name: <input type="text" id="fNameBox" /> <br /><br />
        Radius (Of Circle): <input type="text" id="circleRadius" /> <br /><br />
        <p id="demo">Output:</p>
        <p id="message"><br /></p>
        <p id="radiusOutput"><br /></p>
      </form>
      <!-- Buttons For Submit & Clear -->
      <button type="button" onClick="changeText()">Submit</button>
      <button type="button" onClick="clearText()">Clear</button>
    </div>
  </body>
</html>

Solution

You need to get the radius input value first because the radiusOutput variable you were trying to use is undefined. Also, you need to use parseInt() to convert input value of type String to type Number.

const radius1 = parseInt(document.getElementById("circleRadius").value) * Math.PI;

Also, I recommend using <input type="number" for radius instead of text.

function changeText() {
             var firstName = document.getElementById("fNameBox").value;
             var message = ", The area of your circle is: ";
             const radius1 = parseInt(document.getElementById("circleRadius").value) * Math.PI;
             var result = firstName.toUpperCase() + message + radius1;
        document.getElementById("message").innerHTML = (result);
      }

      function clearText() {
        document.getElementById("message").innerHTML = "<br>";
        document.getElementById("fNameBox").value = "";
        document.getElementById("wageBox").value = "";
      }

body {
        background-color: antiquewhite;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        text-align: center;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        text-decoration: underline;
      }

      span {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        font-style: italic;
      }

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Program 4</title>
  </head>
  <body>
    <div id="main">
      <div id="header">
        <h1>Program 4</h1>
        <span>An Expression using a Constant</span>
      </div>
      <br /><br />
      <form id="myForm">
        First Name: <input type="text" id="fNameBox" /> <br /><br />
        Radius (Of Circle): <input type="number" id="circleRadius" /> <br /><br />
        <p id="demo">Output:</p>
        <p id="message"><br /></p>
        <p id="radiusOutput"><br /></p>
      </form>
      <!-- Buttons For Submit & Clear -->
      <button type="button" onClick="changeText()">Submit</button>
      <button type="button" onClick="clearText()">Clear</button>
    </div>
  </body>
</html>