-1

我完全是 Javascript 的初学者，并试图创建一个简单的程序来计算圆的面积。我目前坚持如何创建一个包含变量区域的输出框。抱歉，如果这是一个愚蠢的问题，但我非常感谢任何形式的帮助！

<!DOCTYPE html>
<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>Circle Area Calculator</title>
</head>
<body>
    <fieldset><h3><i>Enter radius of a circle:</i></h3>
        <form name="circleForm" onsubmit="calc()">
            <label for="name">Enter a number:</label><br>
            <input type="number" name="radius" id="radius" placeholder="radius" required><br>
            <button type="submit">Calculate Area</button>
            <button type="reset">Reset value</button>
        </form>
        <div id="result">
            <output name="result" onsubmit="result()">

            </output>
        </div>
    </fieldset>
</body>
<script>
    function calc() {
        var radius = document.forms.circleForm.elements.namedItem("radius").value;
        var area = (radius**2)*3.14
        var calculate;
        return area

        document.getElementById("result").innerHTML = area;
    }
</script>
</html>
4

2 回答 2

0

将事件侦听器添加到您的按钮并从那里运行您的 calc 函数。

使用event.preventDefault()将阻止浏览器提交表单和刷新页面。

设置innerHTML结果 div 的值是正确的做法，但您会在函数返回值之后放置它，这会阻止它被执行。

let calculate = document.getElementById('calculate');

calculate.addEventListener('click', () => {
  event.preventDefault();
  calc();
});

function calc() {
  var radius = document.forms.circleForm.elements.namedItem("radius").value;
  var area = (radius ** 2) * 3.14
  var calculate;
  document.getElementById("result").innerHTML = area;
}
<!DOCTYPE html>
<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>Circle Area Calculator</title>
</head>

<body>
  <fieldset>
    <h3><i>Enter radius of a circle:</i></h3>
    <form name="circleForm">
      <label for="name">Enter a number:</label><br>
      <input type="number" name="radius" id="radius" placeholder="radius" required><br>
      <button id="calculate">Calculate Area</button>
      <button type="reset">Reset value</button>
    </form>
    <div id="result">

    </div>
  </fieldset>
</body>

</html>

于 2021-09-30T04:37:26.743 回答
-1

这边走

<!DOCTYPE html>
<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>Circle Area Calculator</title>
  <style>
    form {
      width : 20em;
      }
    legend {
      font-size   : 1.2em;
      font-weight : bold;
      font-style  : italic;
      padding     : 0 .4em;
      }
    label {
      font-size : .8em;
      }
    input,output {
      display  : block;
      }
    button {
      margin : .8em .4em;
      }
  </style>
</head>
<body>

  <form name="circle-form">
    <fieldset>
      <legend>Enter radius of a circle:</legend>

      <label>Enter a number:</label> 
      <input type="number" name="radius" id="radius" placeholder="radius" required><br>
      
      <button type="submit">Calculate Area</button>
      <button type="reset">Reset value</button>

      <output name="result">&nbsp;</output>

    </fieldset>
  </form>

<script>
  const circleForm = document.forms['circle-form'];

  circleForm.onsubmit = e =>
    {
    e.preventDefault() // disable page submit ==> relaod page
    circleForm.result.textContent = (circleForm.radius.valueAsNumber ** 2) * Math.PI
    }
  circleForm.onreset = e =>
    {
    circleForm.result.innerHTML = '&nbsp;'
    circleForm.radius.value     = ''
    }
</script>
</body>
</html>

演示

const circleForm = document.forms['circle-form'];

circleForm.onsubmit = e =>
  {
  e.preventDefault() // disable page submit ==> relaod page
  circleForm.result.textContent = (circleForm.radius.valueAsNumber ** 2) * Math.PI
  }
circleForm.onreset = e =>
  {
  circleForm.result.innerHTML = '&nbsp;'
  }
form {
  width : 20em;
  }
legend {
  font-size   : 1.2em;
  font-weight : bold;
  font-style  : italic;
  padding     : 0 .4em;
  }
label {
  font-size : .8em;
  }
input,output {
  display  : block;
  }
button {
  margin : .8em .4em;
  }
<form name="circle-form">
  <fieldset>
    <legend>Enter radius of a circle:</legend>

    <label>Enter a number:</label> 
    <input type="number" name="radius" id="radius" placeholder="radius" required><br>
    
    <button type="submit">Calculate Area</button>
    <button type="reset">Reset value</button>

    <output name="result">&nbsp;</output>

  </fieldset>
</form>

于 2021-09-30T05:02:52.993 回答