如何在 Javascript 中选择 HTML 输入元素并更改值来运行方程式？
我正在尝试使用输入字段来更改方程的某些值，以便给出合成角度。我已设法选择默认值并将答案记录到控制台，但是当我尝试更改这些值时没有任何变化？
我的最终目标是拥有一个应用程序，您可以在其中输入这 3 个值并点击“提交”，然后它将在屏幕上输出答案。因此，对于默认值，它将输出“角度为：36.92°”
const height = document.getElementById("height").value;
const trussSpan = document.getElementById("trussSpan").value;
const rafter = document.getElementById("rafter").value;
const hypot = Math.hypot(height, (trussSpan / 2));
const t1 = Math.atan2(height, (trussSpan / 2)) * 180 / Math.PI;
const t2 = Math.atan2(rafter, hypot) * 180 / Math.PI;
const result = Number((t1 - t2)).toFixed(2);
console.log("height: " + height);
console.log("Truss Span: " + trussSpan);
console.log("Rafter Depth: " + rafter);
console.log("Hyptonuse: " + hypot);
console.log("Angle 1: " + t1);
console.log("Angle 2: " + t2);
console.log("The angle of the truss is: " + result + "°");
div{
text-align: center;
color: maroon;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight:400;
}
h1 {
text-align: center;
color: maroon;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight:400;
}
<!DOCTYPE html>
<html>
<head>
<title>Angle Finder</title>
<link rel="stylesheet" href="angleFinder.css">
</head>
<body>
<div>
<label for="height">Height: </label>
<input type="number" id="height" value="2000">
<label for="trussSpan">Span: </label>
<input type="number" id="trussSpan" value="5000">
<label for="rafter">Rafter Depth: </label>
<input type="number" id="rafter" value="97">
<br>
<input type="submit" id="submit">
</div>
<h1> Angle Finder</h1>
<script src="angleFinder.js"></script>
</body>
</html>
蓝山帝景1回答
-
一只甜甜圈
一些更改：首先，<h2 id="theResult"></h1>在角度查找器后面添加一个，您将在其中显示结果。其次，将 js 文件的代码放入名为getResult().第三，在html文件中，调用该getResult()函数作为input的onclick事件。“input”标签中的“onclick”属性将您的按钮链接到 javascript 函数，以便每当单击该按钮时都会调用该函数。<input type="submit" id="submit" onclick="getResult()">最后，添加document.getElementById("theAnswer").innerHTML = result;到函数的末尾getResult()，以便它将更新标签的innerHTML <h2 id="theAnswer">。请参阅以下更改：html 文件：<!DOCTYPE html><html><head> <title>Angle Finder</title> <link rel="stylesheet" href="angleFinder.css"></head><body> <div> <label for="height">Height: </label> <input type="number" id="height" value="2000"> <label for="trussSpan">Span: </label> <input type="number" id="trussSpan" value="5000"> <label for="rafter">Rafter Depth: </label> <input type="number" id="rafter" value="97"> <br> <input type="submit" id="submit" onclick="getResult()"> </div> <h1> Angle Finder</h1> <h2 id="theResult"></h1> <script src="angleFinder.js"></script> </body></html>JavaScript 文件：function getResult() { const height = document.getElementById("height").value; const trussSpan = document.getElementById("trussSpan").value; const rafter = document.getElementById("rafter").value; const hypot = Math.hypot(height, (trussSpan / 2)); const t1 = Math.atan2(height, (trussSpan / 2)) * 180 / Math.PI; const t2 = Math.atan2(rafter, hypot) * 180 / Math.PI; const result = Number((t1 - t2)).toFixed(2); console.log("height: " + height); console.log("Truss Span: " + trussSpan); console.log("Rafter Depth: " + rafter); console.log("Hyptonuse: " + hypot); console.log("Angle 1: " + t1); console.log("Angle 2: " + t2); console.log("The angle of the truss is: " + result + "°"); document.getElementById("theResult").innerHTML = result;}
随时随地看视频慕课网APP
相关分类
JavaScript