javascript - 如何在 JavaScript 中访问 HTML INPUT？

Question

我在JS中写了一个简单的函数来计算三角形的面积。当我将数字直接分配给变量时，它工作正常。但是，当我分配变量以从 HTML INPUT 获取值时，它工作得非常疯狂，并且输出是大数字。我在下面展示了这两种情况；我使用这个公式来计算三角形的面积： 公式的图像。`

<script type="text/javascript">
  function triangleArea() {
    var side1 = document.getElementById("a").value;
    var side2 = document.getElementById("b").value;
    var side3 = document.getElementById("c").value;
    var s = (side1 + side2 + side3) / 2;
    var area = Math.sqrt(s * ((s - side1) * (s - side2) * (s - side3)));
    document.getElementById('resultOfTriangle').innerHTML = area;
  }

<h2>4. Write a JavaScript program to find the area of a triangle where lengths of the three of its sides are 5, 6, 7</h2>
<p>a: <input type="number"  id="a" value="5" ></p>
<p>b:  <input type="number"  id="b" value="6"></p>
<p>c: <input type="number" id="c" value="7" ></p>
<button type="button" onclick="triangleArea()">Try</button>
<p>Area is: <span id="resultOfTriangle"></span></p>

`在这里，当我直接分配变量时，它工作正常。

<script type="text/javascript">
  function triangleArea() {
    var side1 = 5;
    var side2 = 6;
    var side3 = 7;
    var s = (side1 + side2 + side3) / 2;
    var area = Math.sqrt(s * ((s - side1) * (s - side2) * (s - side3)));
    document.getElementById('resultOfTriangle').innerHTML = area;
  }

</script>

<h2>4. Write a JavaScript program to find the area of a triangle where lengths of the three of its sides are 5, 6, 7</h2>
<p>a: <input type="number"  id="a" value="5"> </p>
<p>b:  <input type="number"  id="b" value="6"> </p>
<p>c: <input type="number" id="c" value="7"> </p>
<button type="button" onclick="triangleArea()">Try</button>
<p>Area is: <span id="resultOfTriangle">""</span> </p>

标签： javascripthtml