javascript - Javascript代码运行函数不止一次

Question

所以我正在尝试使用 html 和 js 为梯形制作面积计算器。我的代码如下所示，但由于某种原因，我没有得到正确的答案。我怀疑这是因为代码不止一次地运行该函数，但我不太确定。

function solveArea() {
  var base1, base2, height, area;
  base1 = document.getElementById("base1").value;
  base2 = document.getElementById("base2").value;
  height = document.getElementById("height").value;
  area = ((base1 + base2) / 2) * height;
  document.getElementById("area").value = area;
}

<form>
  <input id="base1" type="number" placeholder="Base 1">
  <input id="base2" type="number" placeholder="Base 2">
  <input id="height" type="number" placeholder="Height">
  <input id="area" type="number" readonly="" placeholder="Area">
  <input id="calculate" type="button" value="Calculate" onclick="solveArea()">
  <input type="reset" value="Clear">
</form>

标签： javascripthtml

Answer 1

您可以使用 parseInt

        function solveArea(){
            var base1, base2, height, area;
            base1= parseInt(document.getElementById("base1").value, 10);
            base2= parseInt(document.getElementById("base2").value, 10);
            height= parseInt(document.getElementById("height").value, 10);
            area = ((base1 + base2) / 2)* height;
            document.getElementById("area").value = area;
        }