如何利用3個HTML輸入框來計算三角形的面積？

我是JavaScript新手和社區。如何利用3個HTML輸入框來計算三角形的面積？

我試圖完成W3Academy上找到的問題來計算使用三條邊長度的三角形面積。我挑戰自己包含HTML輸入，而不是將數字聲明爲JavaScript中的變量。我在JS Bin中使用輸入5，4和3來運行它，但是它不會產生任何結果。代碼有什麼問題？

任何幫助，將不勝感激！

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <input type="number" id="side1"/> 
    <br> 
    <br> 
    <input type="number" id="side2"/> 
    <br> 
    <br> 
    <input type="number" id="side3"/> 
    <br> 
    <br> 
    <button onclick="area()">Calculate</button> 
    <br> 
    <p id = "output">Result</p> 
</body> 
</html>

這裏是我的JS：

var sideA = document.getElementById("side1").value; 
var sideB = document.getElementById("side2").value; 
var sideC = document.getElementById("side3").value; 
var p = sideA + sideB + sideC; 
var result; 

function area() { 
    result = sqrt(p * (p - sideA) * (p - sideB) *(p - sideC)); 
    document.getElementById("output").innerHTML = result; 
}

來源

2016-07-31 CJamz

問題是什麼？你應該指定你的問題。 – TyrionGraphiste

**兩個想法**在你嘗試以數學方式使用它們之前，確保將'parseInt'或'parseFloat'這個側面變量轉換爲數字。你還需要在執行JS之前給DOM加載時間 - 使用'window.onload'？ – markE

對不起 - 問題是我做錯了什麼？我試圖使用輸入5，4和3在JS Bin中運行，但單擊該按鈕不會產生任何結果。 – CJamz

第一個：您正在代碼的開頭檢索輸入字段的值，這意味着所有輸入字段值都爲空，要解決此問題，您應該將這些行移動到area()函數內，如這樣的：

function area() { 
    var sideA = document.getElementById("side1").value, 
    sideB = document.getElementById("side2").value, 
    sideC = document.getElementById("side3").value, 
    p = sideA + sideB + sideC, 
    result = Math.sqrt(p * (p - sideA) * (p - sideB) * (p - sideC)); 
    document.getElementById("output").innerHTML = result; 
}

二：你應該使用的輸入字段的值parseInt()或parseFloat()。或者，相反，你可以簡單地添加+標誌，就像這樣：

var sideA = +document.getElementById("side1").value;

第三：我認爲這是不Math.sqrt()sqrt()

來源

2016-07-31 23:29:56

謝謝！它現在運行。 – CJamz

不客氣，我很高興它有幫助 –

首先，你需要包括其中的js文件是：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <script type="text/javascript" src="The file path javascript"></script> 
    <title>JS Bin</title> 
</head>

我個人這樣做：

var sideA = $("side1").val(); 
var sideB = $("side2").val(); 
var sideC = $("side3").val(); 

area(sideA, sideB, sideC); 


function area(a, b, c) { 
    var p = a + b + c; 
    var result = sqrt(p * (p - a) * (p - b) *(p - c)); 
    $("output").html(result); 
}

來源

2016-07-31 23:12:41

感謝您的回覆！這是在JQuery中嗎？我希望看到我的JS有什麼問題。我不認爲我需要在這個例子中包含js文件的位置，因爲我使用的是JS Bin。 – CJamz

是的，它的JQuery，它需要包括它 –

如何利用3個HTML輸入框來計算三角形的面積？

回答

相關問題