He estado tratando de hacer un sitio web de calculadora como práctica para aprender HTML, CSS y JS. Sin embargo, necesito ayuda para obtener un valor entero de HTML y trabajar con él en javascript. aquí está mi código
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) }PD: no incluí mi para mantenerlo ordenado
Debe obtener el valor de input en el controlador de click , también el value debe estar en minúsculas.
let radiusInput = document.getElementById("radiusInput"); let radiusOutput; function spearesSolve() { radiusOutput = (radiusInput.value ** 3) * 3.14159265359 * (4/3); console.log(radiusOutput) }