Калькулятор объема сферы - PullRequest
Новая
       7

Калькулятор объема сферы

0 голосов
/ 06 ноября 2018

Здравствуйте, я делаю калькулятор громкости, и мне не удается отобразить громкость на экране. Решит ли это оповещение? Это назначение требует от меня использования анонимных функций, поэтому мне сложно заставить эту функцию работать. 

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

Ответы [ 3 ]

0 голосов
/ 06 ноября 2018

Вам нужно манипулировать 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;
 }

Что изменилось:

  • I вызвал функцию в onclick sphereVol, сказав sphereVol()
  • Я посмотрел громкость
  • Я изменил HTML, чтобы показать результат

Дополнительная литература:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
  2. https://www.w3schools.com/jsref/prop_text_value.asp
  3. https://www.w3schools.com/js/js_htmldom_html.asp
0 голосов
/ 06 ноября 2018

В вашей программе есть пара ошибок. Я улучшил ваш код, а также прочитал комментарий в каждой строке. 

<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>
0 голосов
/ 06 ноября 2018

Вам нужно получить радиус от входа и вывести его куда-нибудь. Вы можете использовать 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>
...