如何获取 HTML 整数输入并在 JavaScript 中使用它

Question

I have been trying to make a calculator website as practice to learn HTML, CSS and JS.我一直在尝试制作一个计算器网站作为学习 HTML、CSS 和 JS 的练习。 However, I need help with fetching an integer value from HTML and working with it in javascript.但是，我需要帮助来从 HTML 中获取整数值并在 javascript 中使用它。 here is my code这是我的代码

HTML: 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: 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 PS：我没有包括我的保持整洁

Answer 1

You need to get the input value in the click handler, also value should be lowercase.您需要在click处理程序中获取input值， value也应该是小写的。

let radiusInput = document.getElementById("radiusInput");
let radiusOutput;

function spearesSolve() {
    radiusOutput = (radiusInput.value ** 3) * 3.14159265359 * (4/3);
   console.log(radiusOutput)
}

如何获取 HTML 整数输入并在 JavaScript 中使用它

问题描述

1 个解决方案

解决方案1
0 2022-07-18 13:40:27

如何获取 HTML 整数输入并在 JavaScript 中使用它

问题描述

1 个解决方案

解决方案1 0 2022-07-18 13:40:27

解决方案1
0 2022-07-18 13:40:27