Skip to content

I want user input to be calculated into Cylinder surface, volume and half of the surface areato then be printed into html

I’ve wanted to make a site to calculate different geometrical shapes as an side project, style it and possibly share it among my class, I got stuck on the first task for a few weeks now, THE CYLINDER

<!DOCTYPE html>
<html>
    <head>
        <title>Cylinder</title>
    </head>
    <body>   
        <form> 
                <!--takes input from user-->
            <label for="Radius">Radius:</label>
            <input type="number" id="r" name="Radius"><br><br>
            <label for="Height">Height:</label>
            <input type="number" id="v" name="Height"><br><br>
            <button onclick="go();return false;">Script go!</button><br><br><br><br>
        </form>
        <div>
                <!--will get replaced by result-->
            <p id="x">S Povrch.</p>  <!--Surface-->
            <p id="y">V Obsah.</p>  <!--Volume-->
            <p id="z">Plovina S.</p>  <!--Half of surface-->
        <script>
            function go() {
            
                // fetches data value from input boxes
            document.getElementById(r);
            document.getElementById(v);
            
                //declares user input into variables
            var Ha = r;
            var HaHa = v;
            
                //calculates result
            var Povrch = parseFloat(2 * 3.14 * Ha * (Ha + HaHa));
            var Obsah = parseFloat(3.14 * Ha * Ha * HaHa);
            var HalfS = parseFloat(2 * 3.14 * Ha * (Ha + HaHa) / 2);
            
                //prints result
            document.getElementById("x").innerHTML = "Povrch: " + Povrch;
            document.getElementById("y").innerHTML = "Obsah: " + Obsah;
            document.getElementById("z").innerHTML = "HalfS: " + HalfS;
        }
        </script>   
    </body>
</html>

When I run this in my browser, it returns NaN.

Answer

You’ve got a few typos in your JavaScript.

This:

document.getElementById(r);
document.getElementById(v);

is both invalid, and wouldn’t do anything – you’re selecting a few elements, but not storing those references (assuming the selectors were fixed) to anything. So, you want this:

var r = document.getElementById('r');
var v = document.getElementById('v');

Now you have a reference the elements with the IDs of ‘r’ and ‘v’. Next, you need to read the value of those inputs, to get their… value:

var Ha = r.value;
var HaHa = v.value;

With those changes, your script yields output (I haven’t verified that your math is correct, though), as noted in the Stack Snippet here:

function go() {

  // fetches data value from input boxes
  var r = document.getElementById('r');
  var v = document.getElementById('v');

  //declares user input into variables
  var Ha = r.value;
  var HaHa = v.value;

  //calculates result
  var Povrch = parseFloat(2 * 3.14 * Ha * (Ha + HaHa));
  var Obsah = parseFloat(3.14 * Ha * Ha * HaHa);
  var HalfS = parseFloat(2 * 3.14 * Ha * (Ha + HaHa) / 2);

  //prints result
  document.getElementById("x").innerHTML = "Povrch: " + Povrch;
  document.getElementById("y").innerHTML = "Obsah: " + Obsah;
  document.getElementById("z").innerHTML = "HalfS: " + HalfS;
}
<form>
  <!--takes input from user-->
  <label for="Radius">Radius:</label>
  <input type="number" id="r" name="Radius"><br><br>
  <label for="Height">Height:</label>
  <input type="number" id="v" name="Height"><br><br>
  <button onclick="go();return false;">Script go!</button><br><br><br><br>
</form>
<div>
  <!--will get replaced by result-->
  <p id="x">S Povrch.</p>
  <!--Surface-->
  <p id="y">V Obsah.</p>
  <!--Volume-->
  <p id="z">Plovina S.</p>
  <!--Half of surface-->
</div>