JS calculates perimeter and area of triangle wrong

Question

This is my first JS script. Code is running but wrong answer (50 times to high for perimeter). Can someone help me?

function calc() {
var side1 = document.getElementById("s1").value;
var side2 = document.getElementById("s2").value;
var side3 = document.getElementById("s3").value;
var perimeter = (side1 + side2 + side3);
var area =  Math.sqrt(perimeter/2*((perimeter/2-side1)*(perimeter/2-side2)*(perimeter/2-side3)));
document.getElementById("answer1").innerHTML = "area: " + area;
document.getElementById("answer2").innerHTML = "perimeter: " + perimeter;
}

<form>
  Side 1:
  <input type="text" name="s1" id="s1" value=5><br>
  Side 2:
  <input type="text" name="s2" id="s2" value=6><br>
  Side 3:
  <input type="text" name="s3" id="s3" value=7>
</form>

<button onclick="calc()">Calculate area</button>

<p>test1</p>
<p id="answer1"></p>
<p id="answer2"></p>

i just started programming? Is HTML CSS & JS a good start?

`var perimeter = (side1 + side2 + side3);` side1,side2 & side3 are all going to be strings. so "5" + "6" + "7" would equal "567", I'm assuming that's not what you meant to to do, try using `parseInt` or `parseFloat` on the values. — Keith, Feb 16 '18 at 22:01

Kirill Simonov · Answer 1 · 2018-02-19T09:04:55.920

document.getElementById("s1").value is a string, so side1 + side2 + side3 is string concatenation, not sum. Later, when you divide perimeter by 2, it is converted to a number. You could convert each string to a number by adding + in front of it.

+ is an unary operator, which converts its operand into a number. Unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number.

function calc() {
    var side1 = +document.getElementById("s1").value;
    var side2 = +document.getElementById("s2").value;
    var side3 = +document.getElementById("s3").value;
    var perimeter = (side1 + side2 + side3);
    var area =  Math.sqrt(perimeter/2*((perimeter/2-side1)*(perimeter/2-side2)*(perimeter/2-side3)));
    document.getElementById("answer1").innerHTML = "area: " + area;
    document.getElementById("answer2").innerHTML = "perimeter: " + perimeter;
}

<form>
  Side 1:
  <input type="text" name="s1" id="s1" value=5><br>
  Side 2:
  <input type="text" name="s2" id="s2" value=6><br>
  Side 3:
  <input type="text" name="s3" id="s3" value=7>
</form>

<button onclick="calc()">Calculate area</button>

<p>test1</p>
<p id="answer1"></p>
<p id="answer2"></p>

score 0 · Answer 2 · answered Feb 17 '18 at 00:48

You could use parseInt() on your input values since they are passed as strings. The 567 result you have for the perimeter is obviously string concatenation

Also please do have a look in this SO question suggesting why to use parseInt() and also this one having more test cases.

function calc() {
var side1 = parseInt(document.getElementById("s1").value);
var side2 = parseInt(document.getElementById("s2").value);
var side3 = parseInt(document.getElementById("s3").value);
var perimeter = side1 + side2 + side3;
var area =  Math.sqrt(perimeter/2*((perimeter/2-side1)*(perimeter/2-side2)*(perimeter/2-side3)));
document.getElementById("answer1").innerHTML = "area: " + area;
document.getElementById("answer2").innerHTML = "perimeter: " + perimeter;
}

<form>
  Side 1:
  <input type="text" name="s1" id="s1" value=5><br>
  Side 2:
  <input type="text" name="s2" id="s2" value=6><br>
  Side 3:
  <input type="text" name="s3" id="s3" value=7>
</form>

<button onclick="calc()">Calculate area</button>

<p>test1</p>
<p id="answer1"></p>
<p id="answer2"></p>

JS calculates perimeter and area of triangle wrong

2 Answers2