Question

我是JavaScript和这个社区的新手。

我正在尝试完成我在W3Academy上发现的问题，使用三个边长来计算三角形的面积。我挑战自己要包含HTML输入，而不是将数字声明为JavaScript中的变量。我在JS Bin中使用输入5,4和3运行它，但是它没有产生任何结果。代码有什么问题？

任何帮助将不胜感激！

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="number" id="side1"/>
  <br>
  <br>
  <input type="number" id="side2"/>
  <br>
  <br>
  <input type="number" id="side3"/>
  <br>
  <br>
  <button onclick="area()">Calculate</button>
  <br>
  <p id = "output">Result</p>
</body>
</html>

这是我的JS：

var sideA = document.getElementById("side1").value;
var sideB = document.getElementById("side2").value;
var sideC = document.getElementById("side3").value;
var p = sideA + sideB + sideC;
var result;

function area() {
  result = sqrt(p * (p - sideA) * (p - sideB) *(p - sideC));
  document.getElementById("output").innerHTML = result;
}

Answer 1

首先：您正在检索代码开头的输入字段的值，这意味着您的所有输入字段值都为空，为了解决此问题，您应该移动这些行在2016-A124578_XYZ_moretext.ext becomes 2016-A124578_AAA_moretext.ext 2016-B345654_XYZ_morerandomtext.ext becomes 2016-B345654_BBB_morerandomtext.ext函数中，如下所示：

area()

第二：您应该使用parseInt()或parseFloat()作为输入字段的值。或者，您只需添加 function area() { var sideA = document.getElementById("side1").value, sideB = document.getElementById("side2").value, sideC = document.getElementById("side3").value, p = sideA + sideB + sideC, result = Math.sqrt(p * (p - sideA) * (p - sideB) * (p - sideC)); document.getElementById("output").innerHTML = result; } 符号，如下所示：

第三：我认为var sideA = +document.getElementById("side1").value;不是Math.sqrt()

Answer 2

首先，您需要包含js文件的位置：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="The file path javascript"></script>
  <title>JS Bin</title>
</head>

就我个人而言，我会这样做：

var sideA = $("side1").val();
var sideB = $("side2").val();
var sideC = $("side3").val();

area(sideA, sideB, sideC);


function area(a, b, c) {
  var p = a + b + c;
  var result = sqrt(p * (p - a) * (p - b) *(p - c));
  $("output").html(result);
}

如何利用3个HTML输入框计算三角形的面积？

2 个答案: