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