JavaScript+HTML实现海伦公式计算三角形面积结果错误排查

使用海伦公式编写JavaScript+HTML代码实现三角形面积计算功能时，计算结果不符合预期：测试输入三边长为5、4、3时，正确面积应为6，代码实际返回结果为72088。
原有实现代码如下：

原有JavaScript代码 #

function Triangle(sideA, sideB, sideC) {
  this.sideA = sideA;
  this.sideB = sideB;
  this.sideC = sideC;
  this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);

  this.area = function() {
    return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
  }

}

function calculate() {
  var sideA = document.getElementById('sideA').value;
  var sideB = document.getElementById('sideB').value;
  var sideC = document.getElementById('sideC').value;
  var myTriangle = new Triangle(sideA, sideB, sideC);
  document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}

原有HTML代码 #

<p>
  Enter length of side a <input type='text' id="sideA" />
  <br>
  <br> Enter length of side b <input type='text' id="sideB" />
  <br>
  <br> Enter length of side c <input type='text' id="sideC" />

  <div id="results"></div>

  <button type="button" onclick="calculate()">Calculate</button>
</p>

• 输入框的.value属性默认返回字符串类型值，代码获取边长后没有做类型转换，直接传入了Triangle构造函数
• 计算半周长semiP时，+运算符遇到字符串类型会执行拼接操作而非数值求和：输入5、4、3时，"5" + "4" + "3"的结果是字符串"543"，后续除以2时JS隐式将字符串转为数值，得到错误的半周长271.5
• 后续减法、乘法运算中JS会自动将字符串转为数值计算，基于错误的半周长代入海伦公式计算后，开平方得到的结果就是72088，和正确值偏差极大。

只需要在获取输入框值时，显式将字符串转为数值类型即可，推荐使用parseFloat()支持小数边长输入，修复后的calculate函数如下，其余代码无需改动：

function calculate() {
  // 显式将输入值转为浮点数，避免字符串拼接错误
  var sideA = parseFloat(document.getElementById('sideA').value);
  var sideB = parseFloat(document.getElementById('sideB').value);
  var sideC = parseFloat(document.getElementById('sideC').value);
  var myTriangle = new Triangle(sideA, sideB, sideC);
  document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}

修复后再次输入边长5、4、3，将正确返回面积计算结果6。

内容的提问来源于stack exchange，提问作者sansievar