Javascript 代码多次运行 function

Question

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

 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>

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;
        }

Answer 2

您的代码没有多次运行，问题是当您这样做时

base1= document.getElementById("base1").value;
base2= document.getElementById("base2").value;
console.log(base1+base2)

和 base1 = 1 和 base2 = 1 那么 output 将是

11

因此，您收到的值是一个字符串，因此只需将其转换为数字，您的代码就可以正常工作。

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;
}

Answer 3

document.getElementById().value是一个字符串，因此当您使用+运算符时，它将连接两个操作数。 在您的情况下，您应该将字符串转换为数字（例如使用Number函数）：

 function solveArea() { let base1 = Number(document.getElementById("base1").value); let base2 = Number(document.getElementById("base2").value); let height = Number(document.getElementById("height").value); let 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>

Answer 4

如果您使用parseFloat或Number将输入值解析为数字，那么您应该可以执行所需的基本算术运算。 如果不解析这些数字，它们就会被视为字符串。 parseInt在这方面的问题是它会阻止您使用诸如 5.25 之类的数字作为输入 ~ 它会被视为 5...

 function solveArea() { var base1, base2, height, area; base1 = Number(document.getElementById("base1").value); base2 = Number(document.getElementById("base2").value); height = Number(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>