I have been trying to make a calculator website as practice to learn HTML, CSS and JS. However, I need help with fetching an integer value from HTML and working with it in javascript. here is my code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="3D.css">
<title>3D Shapes Calculator</title>
</head>
<body>
<div class="spearesSection">
<div class="spearesSectionHeading" id="sectionSpearesHeading">
<p class="spearesSectionText">Calculate the Volume of a Speare!</p>
</div>
<div class="workAreaSpeares">
<img class="spearesPicture" src="../Images/Speare.jpg" alt="Error, Page cannot be loaded">
<p class="textSpearesRadius">Radius:</p>
<input type="number" class="inputRadiusSpeare" id="radiusInput">
<button class="buttonExecuteSpeares" id="buttonExecuteSpeares" onclick="spearesSolve()">Solve!</button>
<p class="answerSpeare"> Answer =</p>
<div class="outputAreaSpeare"></div>
<p class=answerSpearePi>In Terms of Pi =</p>
<div class="outputAreaSpearePi"><p class="piSpeare">π</p></div>
</div>
</div>
</body>
<script src="3D.js"></script>
</html>
JS:
let radiusInput = document.getElementById("radiusInput").Value;
let radiusOutput;
function spearesSolve() {
radiusOutput = (radiusInput ** 3) * 3.14159265359 * (4/3);
console.log(radiusOutput)
}
PS: I didn't include my to keep it neat
You need to get the input value in the click handler, also value should be lowercase.
let radiusInput = document.getElementById("radiusInput");
let radiusOutput;
function spearesSolve() {
radiusOutput = (radiusInput.value ** 3) * 3.14159265359 * (4/3);
console.log(radiusOutput)
}