球体积计算器

Question

您好，我正在制作音量计算器，但我似乎无法在屏幕上显示音量。发出警报会解决这个问题吗？此作业要求我使用匿名函数，因此我很难将函数设置为运行.

HTML
 <body>
 <h3> Calculate the Volume of a Sphere <h3>
 <label for="radius">Radius </label>
 <input id="radius" name="radius"  required>
 </input>

 <button id="calc" onclick=sphereVol> calculate </button>

JavaScript

 var sphereVol = function(radius){
 var c = (4/3) * Math.PI * Math.pow(radius, 3);
 return c;
 }

Answer 1

您需要从输入中获取半径并将其输出到某处。您可以使用 alert() 或 console.log() 但如果您可以输出到页面则更好。 document.getElementById() is a fundamental way of getting elements from the DOM and value 可以帮助获取输入。这是一个超级简化的版本：

var sphereVol = function() {
  // get the radius
  let radius = document.getElementById('radius').value
  var c = (4 / 3) * Math.PI * Math.pow(radius, 3);
  // display the result
  document.getElementById('result').textContent = "Volume ≈ " + c.toFixed(4);
}

<h3> Calculate the Volume of a Sphere
</h3>
<label for="radius">Radius </label>
<input id="radius" name="radius" required>
</input>

<button id="calc" onclick="sphereVol()"> calculate </button>
<div id="result">
</div>

Answer 2

您需要操纵 DOM 来接收输入并显示输出。您的功能是正确的，但这是一种操纵 DOM:

的方法

HTML

<body>
 <h3> Calculate the Volume of a Sphere <h3>
 <label for="radius">Radius </label>
 <input id="radius" name="radius" required>

 <button id="calc" onclick=sphereVol()> calculate </button>

 <p>Your volume:</p>
 <p id="outputVolume"></p>

JavaScript

 var sphereVol = function(){
    var radius = document.getElementById("radius").value;
    var c = (4/3) * Math.PI * Math.pow(radius, 3);

    document.getElementById("outputVolume").innerHTML = c;
 }

改变了什么：

我通过说sphereVol()

调用

sphereVol

我查了一下音量
我更改了 HTML 以显示结果

进一步阅读：

Answer 3

您的程序中有几个错误。我已经改进了您的代码并阅读了每一行中的注释。

<html>
 <body>
 <h3> Calculate the Volume of a Sphere <h3>
 <label for="radius">Radius </label>
 <input id="radius" name="radius"  required>
 </input>
 <!-- I added double quote around sphereVol variable which holds the annonymous function  and also have to provide parenthesis for it. -->
 <button id="calc" onclick="sphereVol()"> calculate </button>
 <p id="result"></p>
<script>

 var sphereVol = function(){
 //Reading input radius here
 radius = document.getElementById("radius").value;
 var c = (4/3) * Math.PI * Math.pow(radius, 3);
 console.log(c);
 document.getElementById("result").innerHTML="The volume is: "+c;
 }
 </script>
 </body>
</html>

球体积计算器

Sphere Volume Calculator

javascript

volume

calculator