球体体积计算器答案

【问题标题】：Sphere Volume Calculator球体体积计算器
【发布时间】：2018-11-06 05:17:47
【问题描述】：

您好，我正在制作音量计算器，但似乎无法在屏幕上显示音量。发出警报会解决这个问题吗？这个任务要求我使用匿名函数，所以我很难让函数运行。

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;
 }

【问题讨论】：

您需要从函数的输入中读取半径值，然后提醒音量或将其打印在屏幕上。尝试寻找方法。有很多资源可用于执行此操作。尽管如此，如果你被困住了，你可以随时带着你尝试过的任何东西回到这里并获得一些帮助。

标签： javascript calculator volume

【解决方案1】：

您需要操作 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;
 }

发生了什么变化：

我调用了 onclick sphereVol 中的函数sphereVol()
我查了一下音量
我更改了 HTML 以显示结果

进一步阅读：

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

【解决方案3】：

您需要从输入和输出中获取半径。您可以使用alert() 或console.log()，但如果您可以输出到页面会更好。 document.getElementById() 是从 DOM 获取元素的基本方法，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>

【讨论】：