CODEWITHSUNDEEP
javascripthtml
Mr.Brompton
Mr.Brompton

Reputation: 113

Wrong output in my Triangle Area Calculator using heroni theorum

I'm pretty certain Ive got the code correct, I'm pretty certain I have the formulae correct but for some reason I am getting the result 7496238.570769714 when it should be 14.6969 . Which means something must be wrong... What am I missing dear code guru's?

I have searched the forum, found people doing a similar task but with different problems, I'm using mozilla to check my result.

var answer = 0;
var areaFromLength = function() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  var c = document.getElementById("c").value;
  var x = (a + b + c) / 2;
  var answer = Math.sqrt(x * ((x - a) * (x - b) * (x - c)));
  document.getElementById("result").innerHTML = "<p>The area of the triangle is " + answer + "</p>";
  return false;
};
<form id="tAreas">
  <p><input type="number" id="a" name="a" value="5"> length of triangle side 1</p>
  <p><input type="number" id="b" name="b" value="6"> length of triangle side 2</p>
  <p><input type="number" id="c" name="c" value="7"> length of triangle side 2</p>
  <button onclick="return areaFromLength()">Do the maths!</button>
</form>
<div id="result">
  <p>Your answer will appear here</p>
</div>

Upvotes: 2

Views: 37

Answers (1)

tech2017
tech2017

Reputation: 1806

Your numbers are treated as strings when doing math (5+6+7=567). Use parseFloat:

var answer = 0;
window.areaFromLength = function() {
  var a = parseFloat(document.getElementById("a").value);
  var b = parseFloat(document.getElementById("b").value);
  var c = parseFloat(document.getElementById("c").value);
  var x = (a + b + c) / 2;
  var answer = Math.sqrt(x * ((x - a) * (x - b) * (x - c)));
  document.getElementById("result").innerHTML = "<p>The area of the triangle is " + answer + "</p>";
  return false;
};
<form id="tAreas">
  <p><input type="number" id="a" name="a" value="5"> length of triangle side 1</p>
  <p><input type="number" id="b" name="b" value="6"> length of triangle side 2</p>
  <p><input type="number" id="c" name="c" value="7"> length of triangle side 2</p>
  <button onclick="return areaFromLength()">Do the maths!</button>
</form>
<div id="result">
  <p>Your answer will appear here</p>
</div>

Upvotes: 1

Related Questions