So basically, I was making a Geometrical Calculator. I realized that there was a way to make the code not run correctly, so I tried replacing that with an error message through an if-else statement. It did not work. Does anyone know the problem here?
The code that doesn't work is:
if (variable === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(area formula, rounder);
document.getElementById("display").innerHTML = "Area of shape = formula = " + " = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
Here is my code: index.html:
<!DOCTYPE html>
<html>
<head>
<title> Geometrical Calculator </title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1> Geometrical Calculator </h1>
<br>
<p id="display"> </p>
<br>
<button type="button" onclick="keyArea();" class="button"> Area </button>
<button type="button" onclick="keyPerimeter();" class="button"> Perimeter </button>
<button type="button" onclick="keyVolume();" class="button"> Volume </button>
<button type="button" onclick="keySA();" class="button"> Surface Area </button>
<br> <br>
<button type="button" onclick="location.reload();" class="button"> AC </button>
<button type="button" onclick="keyRound();" class="button"> Round </button>
<br> <br> <br>
<button type="button" onclick="keyAreaCircle();" class="button2" id="circle"> Circle </button>
<button type="button" onclick="keyPerimeterCircle();" class="button2" id="circleP"> Circle </button>
<button type="button" onclick="keyVolumeCylinder();" class="button2" id="cylinder"> Cylinder </button>
<button type="button" onclick="keySACylinder();" class="button2" id="cylinderSA"> Cylinder </button>
<br>
<button type="button" onclick="keyAreaRectangle();" class="button2" id="rectangle"> Rectangle </button>
<button type="button" onclick="keyPerimeterRectangle();" class="button2" id="rectangleP"> Rectangle </button>
<button type="button" onclick="keyVolumeCuboid();" class="button2" id="cuboid"> Cuboid </button>
<button type="button" onclick="keySACuboid();" class="button2" id="cuboidSA"> Cuboid </button>
<br>
<button type="button" onclick="keyAreaSquare();" class="button2" id="square"> Square </button>
<button type="button" onclick="keyPerimeterSquare();" class="button2" id="squareP"> Square </button>
<button type="button" onclick="keyVolumeCube();" class="button2" id="cube"> Cube </button>
<button type="button" onclick="keySACube();" class="button2" id="cubeSA"> Cube </button>
<br>
<button type="button" onclick="keyAreaTriangle();" class="button2" id="triangle"> Triangle </button>
<button type="button" onclick="keyVolumePyramid();" class="button2" id="pyramid"> Pyramid </button>
<br>
<button type="button" onclick="keyAreaParallelogram();" class="button2" id="parallelogram"> Parallelogram </button>
<button type="button" onclick="keyVolumePrism();" class="button2" id="prism"> Prism </button>
<br>
<button type="button" onclick="keyAreaTrapezium();" class="button2" id="trapezium"> Trapezium </button>
<script src="./index.js"> </script>
</body>
</html>
style.css:
body {
background-color: black;
}
h1 {
color: white;
text-align: center;
}
.button {
font-size: 175%;
background-color: gray;
}
.button:hover {
color: darkred;
}
.button2 {
font-size: 150%;
background-color: lightslategray;
}
.button2:hover {
color: darkgreen;
}
#display {
color: white;
text-align: center;
font-size: 150%;
}
index.js:
let circle = document.getElementById("circle");
let rectangle = document.getElementById("rectangle");
let square = document.getElementById("square");
let triangle = document.getElementById("triangle");
let parallelogram = document.getElementById("parallelogram");
let trapezium = document.getElementById("trapezium");
let circleP = document.getElementById("circleP");
let rectangleP = document.getElementById("rectangleP");
let squareP = document.getElementById("squareP");
let cylinder = document.getElementById("cylinder");
let cuboid = document.getElementById("cuboid");
let cube = document.getElementById("cube");
let pyramid = document.getElementById("pyramid");
let prism = document.getElementById("prism");
let cylinderSA = document.getElementById("cylinderSA");
let cuboidSA = document.getElementById("cuboidSA");
let cubeSA = document.getElementById("cubeSA");
let buttonClickSound = new Audio("./Button Click Sound.mp3");
let radius;
const pi = Math.PI;
let length;
let width;
let side;
let height;
let base;
let topLength;
let bottom;
let cross_section;
let area;
let perimeter;
let volume;
let sa;
let rounder;
window.onload = windowLoad();
function windowLoad() {
circle.style.display = "none";
rectangle.style.display = "none";
square.style.display = "none";
triangle.style.display = "none";
parallelogram.style.display = "none";
trapezium.style.display = "none";
circleP.style.display = "none";
rectangleP.style.display = "none";
squareP.style.display = "none";
cylinder.style.display = "none";
cuboid.style.display = "none";
cube.style.display = "none";
pyramid.style.display = "none";
prism.style.display = "none";
cylinderSA.style.display = "none";
cuboidSA.style.display = "none";
cubeSA.style.display = "none";
document.getElementById("display").innerHTML = "Answer";
radius = null;
length = null;
width = null;
area = null;
side = null;
height = null;
base = null;
topLength = null;
bottom = null;
perimeter = null;
volume = null;
cross_section = null;
sa = null;
rounder = 2;
}
function keyArea() {
buttonClickSound.play();
circleP.style.display = "none";
rectangleP.style.display = "none";
squareP.style.display = "none";
cylinder.style.display = "none";
cuboid.style.display = "none";
cube.style.display = "none";
pyramid.style.display = "none";
prism.style.display = "none";
cylinderSA.style.display = "none";
cuboidSA.style.display = "none";
cubeSA.style.display = "none";
if (circle.style.display === "none") {
circle.style.display = "block";
} else {
circle.style.display = "none";
}
if (rectangle.style.display === "none") {
rectangle.style.display = "block";
} else {
rectangle.style.display = "none";
}
if (square.style.display === "none") {
square.style.display = "block";
} else {
square.style.display = "none";
}
if (triangle.style.display === "none") {
triangle.style.display = "block";
} else {
triangle.style.display = "none";
}
if (parallelogram.style.display === "none") {
parallelogram.style.display = "block";
} else {
parallelogram.style.display = "none";
}
if (trapezium.style.display === "none") {
trapezium.style.display = "block";
} else {
trapezium.style.display = "none";
}
}
function keyPerimeter() {
buttonClickSound.play();
circle.style.display = "none";
rectangle.style.display = "none";
square.style.display = "none";
triangle.style.display = "none";
parallelogram.style.display = "none";
trapezium.style.display = "none";
cylinder.style.display = "none";
cuboid.style.display = "none";
cube.style.display = "none";
pyramid.style.display = "none";
prism.style.display = "none";
cylinderSA.style.display = "none";
cuboidSA.style.display = "none";
cubeSA.style.display = "none";
if (circleP.style.display === "none") {
circleP.style.display = "block";
} else {
circleP.style.display = "none";
}
if (rectangleP.style.display === "none") {
rectangleP.style.display = "block";
} else {
rectangleP.style.display = "none";
}
if (squareP.style.display === "none") {
squareP.style.display = "block";
} else {
squareP.style.display = "none";
}
}
function keyVolume() {
buttonClickSound.play();
circle.style.display = "none";
rectangle.style.display = "none";
square.style.display = "none";
triangle.style.display = "none";
parallelogram.style.display = "none";
trapezium.style.display = "none";
circleP.style.display = "none";
rectangleP.style.display = "none";
squareP.style.display = "none";
cylinderSA.style.display = "none";
cuboidSA.style.display = "none";
cubeSA.style.display = "none";
if (cylinder.style.display === "none") {
cylinder.style.display = "block";
} else {
cylinder.style.display = "none";
}
if (cuboid.style.display === "none") {
cuboid.style.display = "block";
} else {
cuboid.style.display = "none";
}
if (cube.style.display === "none") {
cube.style.display = "block";
} else {
cube.style.display = "none";
}
if (pyramid.style.display === "none") {
pyramid.style.display = "block";
} else {
pyramid.style.display = "none";
}
if (prism.style.display === "none") {
prism.style.display = "block";
} else {
prism.style.display = "none";
}
}
function keySA() {
buttonClickSound.play();
circle.style.display = "none";
rectangle.style.display = "none";
square.style.display = "none";
triangle.style.display = "none";
parallelogram.style.display = "none";
trapezium.style.display = "none";
circleP.style.display = "none";
rectangleP.style.display = "none";
squareP.style.display = "none";
cylinder.style.display = "none";
cuboid.style.display = "none";
cube.style.display = "none";
pyramid.style.display = "none";
prism.style.display = "none";
if (cylinderSA.style.display === "none") {
cylinderSA.style.display = "block";
} else {
cylinderSA.style.display = "none";
}
if (cuboidSA.style.display === "none") {
cuboidSA.style.display = "block";
} else {
cuboidSA.style.display = "none";
}
if (cubeSA.style.display === "none") {
cubeSA.style.display = "block";
} else {
cubeSA.style.display = "none";
}
}
function keyAreaCircle() {
buttonClickSound.play();
radius = parseFloat(prompt("Enter the radius of the circle"));
if (radius === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(pi * (radius ** 2), rounder);
document.getElementById("display").innerHTML = "Area of circle = \u03C0r^2 = " + pi + " * " + radius + "^2 = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyAreaRectangle() {
buttonClickSound.play();
length = parseFloat(prompt("Enter the length of the rectangle"));
width = parseFloat(prompt("Enter the width of the rectangle"));
if (length === NaN || width === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(length * width, rounder);
document.getElementById("display").innerHTML = "Area of rectangle = lw = " + length + " * " + width + " = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyAreaSquare() {
buttonClickSound.play();
side = parseFloat(prompt("Enter the side of the square"));
if (side === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(side ** 2, rounder);
document.getElementById("display").innerHTML = "Area of square = s^2 = " + side + "^2 = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyAreaTriangle() {
buttonClickSound.play();
height = parseFloat(prompt("Enter the height of the triangle"));
base = parseFloat(prompt("Enter the base of the triangle"));
if (height === NaN || base === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(0.5 * height * base, rounder);
document.getElementById("display").innerHTML = "Area of triangle = 0.5bh = 0.5 * " + base + " * " + height + " = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyAreaParallelogram() {
buttonClickSound.play();
height = parseFloat(prompt("Enter the height of the parallelogram"));
base = parseFloat(prompt("Enter the base of the parallelogram"));
if (height === NaN || base === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(height * base, rounder);
document.getElementById("display").innerHTML = "Area of parallelogram = bh = " + base + " * " + height + " = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyAreaTrapezium() {
buttonClickSound.play();
topLength = parseFloat(prompt("Enter the top length of the trapezium (a)"));
bottom = parseFloat(prompt("Enter the bottom length of the trapezium (b)"));
height = parseFloat(prompt("Enter the height of the trapezium"));
if (topLength === NaN || bottom === NaN || height === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
area = rounded(0.5 * height * (topLength + bottom), rounder);
document.getElementById("display").innerHTML = "Area of trapezium = 0.5h(a+b) = 0.5 * " + height + "(" + topLength + " + " + bottom + ") = " + "<font color='red'>" + area + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyPerimeterCircle() {
buttonClickSound.play();
radius = parseFloat(prompt("Enter the radius of the circle"));
if (radius === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
perimeter = rounded(2 * pi * radius, rounder);
document.getElementById("display").innerHTML = "Circumference of circle = 2\u03C0r = " + "2 * " + pi + " * " + radius + " = " + "<font color='red'>" + perimeter + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyPerimeterRectangle() {
buttonClickSound.play();
length = parseFloat(prompt("Enter the length of the rectangle"));
width = parseFloat(prompt("Enter the width of the rectangle"));
if (length === NaN || width === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
perimeter = rounded(2 * (length + width), rounder);
document.getElementById("display").innerHTML = "Perimeter of rectangle = 2(l+w) = 2(" + length + "+" + width + ") = " + "<font color='red'>" + perimeter + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyPerimeterSquare() {
buttonClickSound.play();
side = parseFloat(prompt("Enter the side of the square"));
if (side === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
perimeter = rounded(4 * side, rounder);
document.getElementById("display").innerHTML = "Perimeter of square = 4s = 4 * " + side + " = " + "<font color='red'>" + perimeter + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyVolumeCylinder() {
buttonClickSound.play();
radius = parseFloat(prompt("Enter the radius of the cylinder"));
height = parseFloat(prompt("Enter the height of the cylinder"));
if (radius === NaN || height === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
volume = rounded(pi * (radius ** 2) * height, rounder);
document.getElementById("display").innerHTML = "Volume of cylinder = \u03C0r^2h = " + pi + " * " + radius + "^2" + " * " + height + " = " + "<font color='red'>" + volume + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyVolumeCuboid() {
buttonClickSound.play();
length = parseFloat(prompt("Enter the length of the cuboid"));
width = parseFloat(prompt("Enter the width of the cuboid"));
height = parseFloat(prompt("Enter the height of the cuboid"));
if (length === NaN || width === NaN || height === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
volume = rounded(length * width * height, rounder);
document.getElementById("display").innerHTML = "Volume of cuboid = lwh = " + length + " * " + width + " * " + height + " = " + "<font color='red'>" + volume + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyVolumeCube() {
buttonClickSound.play();
side = parseFloat(prompt("Enter the side of the cube"));
if (side === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
volume = rounded(side ** 3, rounder);
document.getElementById("display").innerHTML = "Volume of cube = s^3 = " + side + "^3 = " + "<font color='red'>" + volume + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyVolumePyramid() {
buttonClickSound.play();
base = parseFloat(prompt("Enter the base area of the pyramid"));
height = parseFloat(prompt("Enter the height of the pyramid"));
if (base === NaN || height === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
volume = rounded((1/3) * base * height, rounder);
document.getElementById("display").innerHTML = "Volume of pyramid = bh/3 = " + base + " * " + height + " / 3 = " + "<font color='red'>" + volume + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyVolumePrism() {
buttonClickSound.play();
cross_section = parseFloat(prompt("Enter the area of the cross-section of the prism (could be the area of any shape)"));
length = parseFloat(prompt("Enter the length of the prism"));
if (cross_section === NaN || length === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
volume = rounded(cross_section * length, rounder);
document.getElementById("display").innerHTML = "Volume of prism = area of cross-section * l = " + cross_section + " * " + length + " = " + "<font color='red'>" + volume + "</font>" + " (" + rounder + " d.p.)";
}
}
function keySACylinder() {
buttonClickSound.play();
radius = parseFloat(prompt("Enter the radius of the cylinder"));
height = parseFloat(prompt("Enter the height of the cylinder"));
if (radius === NaN || height === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
sa = rounded(((2 * pi * (radius ** 2)) + (2 * pi * radius * height)), rounder);
document.getElementById("display").innerHTML = "Surface Area of cylinder = (2\u03C0r^2) + (2\u03C0rh) = (2 * " + pi + " * " + radius + "^2) + (2 * " + pi + " * " + radius + " * " + height + ") = " + "<font color='red'>" + sa + "</font>" + " (" + rounder + " d.p.)";
}
}
function keySACuboid() {
buttonClickSound.play();
length = parseFloat(prompt("Enter the length of the cuboid"));
width = parseFloat(prompt("Enter the width of the cuboid"));
height = parseFloat(prompt("Enter the height of the cuboid"));
if (length === NaN || width === NaN || height === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
sa = rounded(2 * ((length * width) + (width * height) + (length * height)), rounder);
document.getElementById("display").innerHTML = "Surface Area of cuboid = 2((lw) + (wh) + (lh)) = 2(" + length + " * " + width + ") + (" + width + " * " + height + ") + (" + length + " * " + height + ") = " + "<font color='red'>" + sa + "</font>" + " (" + rounder + " d.p.)";
}
}
function keySACube() {
buttonClickSound.play();
side = parseFloat(prompt("Enter the side of the cube"));
if (side === NaN) {
document.getElementById("display").innerHTML = "Error. Please reload the page and try again";
} else {
sa = rounded(6 * (side ** 2), rounder);
document.getElementById("display").innerHTML = "Surface Area of cube = 6s^2 = 6 * " + side + "^2 = " + "<font color='red'>" + sa + "</font>" + " (" + rounder + " d.p.)";
}
}
function keyRound() {
buttonClickSound.play();
rounder = parseInt(prompt("Enter the number of decimal places the answer should be rounded to. Default: 14"));
document.getElementById("display").innerHTML = "Round = " + rounder + " decimal places";
}
function rounded(number, decimal) {
decimal = Math.pow(10, decimal);
return Math.round(number * decimal) / decimal;
}
