javascript - JS计算三 Angular 形的周长和面积错误

Question

这是我的第一个 JS 脚本。代码正在运行但答案错误(周界高 50 倍)。有人可以帮助我吗？

function calc() {
var side1 = document.getElementById("s1").value;
var side2 = document.getElementById("s2").value;
var side3 = document.getElementById("s3").value;
var perimeter = (side1 + side2 + side3);
var area =  Math.sqrt(perimeter/2*((perimeter/2-side1)*(perimeter/2-side2)*(perimeter/2-side3)));
document.getElementById("answer1").innerHTML = "area: " + area;
document.getElementById("answer2").innerHTML = "perimeter: " + perimeter;
}

<form>
  Side 1:
  <input type="text" name="s1" id="s1" value=5><br>
  Side 2:
  <input type="text" name="s2" id="s2" value=6><br>
  Side 3:
  <input type="text" name="s3" id="s3" value=7>
</form>

<button onclick="calc()">Calculate area</button>

<p>test1</p>
<p id="answer1"></p>
<p id="answer2"></p>

我刚开始编程？ HTML CSS 和 JS 是好的开始吗？

Answer 1

document.getElementById("s1").value 是一个字符串，所以 side1 + side2 + side3 是字符串连接，不是求和。稍后，当您将 perimeter 除以 2 时，它会转换为数字。您可以通过在其前面添加 + 将每个字符串转换为数字。

+ 是一个 unary operator ，它将其操作数转换为数字。一元加法是将某物转换为数字的最快和首选方法，因为它不对数字执行任何其他操作。

function calc() {
    var side1 = +document.getElementById("s1").value;
    var side2 = +document.getElementById("s2").value;
    var side3 = +document.getElementById("s3").value;
    var perimeter = (side1 + side2 + side3);
    var area =  Math.sqrt(perimeter/2*((perimeter/2-side1)*(perimeter/2-side2)*(perimeter/2-side3)));
    document.getElementById("answer1").innerHTML = "area: " + area;
    document.getElementById("answer2").innerHTML = "perimeter: " + perimeter;
}

<form>
  Side 1:
  <input type="text" name="s1" id="s1" value=5><br>
  Side 2:
  <input type="text" name="s2" id="s2" value=6><br>
  Side 3:
  <input type="text" name="s3" id="s3" value=7>
</form>

<button onclick="calc()">Calculate area</button>

<p>test1</p>
<p id="answer1"></p>
<p id="answer2"></p>