(JavaScript) 从用户输入框中求圆的面积

Question

好吧，所以我想弄清楚我在这里做错了什么，希望有人能在正确的方向上帮助我。

我将拥有下面的所有代码。以及在 CodePen 上，如果有帮助的话 here

我想制作一个简单的 HTML 页面，其中：

函数求圆的面积
公式应该是π(pi)r的平方吧？还是 Math.PI?
以π为常数
用户将在文本框中输入他们的名字
用户将从第二个文本框输入半径
计算圆的面积。
连接用户的名字、消息和圆的面积，并将所有这些输出到文档中。非常感谢任何可以帮助我解决这个问题的人，我整天都被困在这上面，需要一些帮助。即使不是答案，也只是可以指出正确方向的人，或者我做错了什么？谢谢大家

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>

Answer 1

您需要先获取半径输入值，因为您尝试使用的 radiusOutput 变量未定义。此外，您需要使用 parseInt() 将 String 类型的输入值转换为 Number 类型。

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

此外，我建议使用 <input type="number" 作为半径而不是 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>

(JavaScript) 从用户输入框中求圆的面积

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

javascript

html

pi