CODEWITHSUNDEEP
javascript
Leen
Leen

Reputation: 39

JS calculates perimeter and area of triangle wrong

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?

Upvotes: 1

Views: 542

Answers (2)

Kirill Simonov
Kirill Simonov

Reputation: 8491

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>

Upvotes: 1

user2560539
user2560539

Reputation:

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>

Upvotes: 0

Related Questions