我正在尝试使用输入字段来更改方程的某些值，以便给出合成角度。我已设法选择默认值并将答案记录到控制台，但是当我尝试更改这些值时没有任何变化？我的最终目标是拥有一个应用程序，您可以在其中输入这 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 回答
一只甜甜圈
TA贡献1836条经验 获得超5个赞
一些更改：首先，<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;
}
添加回答
举报
0/150
提交
取消