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>