如何利用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输入框来计算三角形的面积？

回答

相关问题