Results of triangle calculations don't appear

Question

My HTML and JavaScript are pointing in the right direction. The function and specs work on Mocha Spec Runner. The HTML submit buttons work. The only problem is that it returns no results on my webpage.

var triangle = function(side1,side2,side3){
  if ((side1 ===1) && (side2 ===1) && (side3 ===1)) {
    return "equilateral";
  } else if ((side1 ===2) && (side2 ===2) && (side3 ===4)) {
    return "isosceles";
  } else if ((side1===2) && (side2 ===4) && (side3 ===6)) {
    return "scalene";
  } else if ((side1 ===1) && (side2 ===5) && (side3 ===9)) {
    return "not a triangle";
  };
};

$(document).ready(function(){
  $("form#triangle-entry").submit(function(event){
    event.preventDefault();
    var side1 = parseInt($("input#side1").val());
    var side2 = parseInt($("input#side2").val());
    var side3 = parseInt($("input#side3").val());
    console.log(side1);
    var result = triangle(side1, side2, side3); 
    $("#result").show();
    $(".tri").text(result);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1>Triangles</h1>
  <h2>Figure out what kind of triangle your measurements are below.</h2>

  <form id="triangle-entry">
    <div class="form-group">
      <label for="side1">First side</label>
      <input id="side1" type="number">
    </div>

    <div class="form-group">
      <label for="side2">Second side</label>
      <input id="side2" type="number">
    </div>

    <div class="form-group">
      <label for="side3">Third side</label>
      <input id="side3" type="number">
    </div>
   <button type="submit" class="btn btn-success btn-lg">Submit</button> 
  </form>
  
  <div id="result">
    <p>That type of triangle is<span class="tri"></span>.</p>
  </div>
</div>

Answer 1

If nothing is showing up on your webpage, that could mean a number of things. The first thing to check is your console/developer tools for errors.

Something could be wrong with the way you're referencing files: js/jquery-1.11.1.min.js points to a file that has to be in the same directory as your webpage. The same goes for js/script.js and your stylesheets.

I put your code into a Fiddle here and it works fine for equilateral. However, as nnnnnn noted, you shouldn't be comparing the sides to predetermined lengths, you should be comparing them to each other.

Also, you don't have a fallback statement for your if-else chain:

if ((side1 ===1) && (side2 ===1) && (side3 ===1)){
    return "equilateral";
}else if ((side1 ===2) && (side2 ===2) && (side3 ===4)){
    return "isosceles";
}else if ((side1===2) && (side2 ===4) && (side3 ===6)){
    return "scalene";
}else if ((side1 ===1) && (side2 ===5) && (side3 ===9)){
    return "not a triangle";
}

What happens if side1 doesn't equal 1 or 2? Your function returns nothing, which is an issue. JavaScript is nice about it, which is why the error slipped by you, but it's important. You need to add a final else statement (which, in this case, means just making not a triangle your fallback):

if ((side1 ===1) && (side2 ===1) && (side3 ===1)){
    return "equilateral";
}else if ((side1 ===2) && (side2 ===2) && (side3 ===4)){
    return "isosceles";
}else if ((side1===2) && (side2 ===4) && (side3 ===6)){
    return "scalene";
}else{
    return "not a triangle";
}

I probably should have let you work the triangle logic out by yourself in case it is part of your assignment, but I got carried away, so I went ahead and did it. I'll explain it to you:

First, you have to check if the sides can mathematically form a triangle. That is simple: the sides have to satisfy the following conditions.

For a triangle with sides of length a, b, and c:

1. a + b > c
2. b + c > a
3. a + c > b

Then, you have to check the types.

If it is equilateral, all the side lengths are equal. If it is isosceles, two of the side lengths are equal. Otherwise, it is scalene (none of the side lengths are equal).

In code:

if ((side1 + side2 > side3) && (side2 + side3 > side1) && (side1 + side3 > side2)) {
    if ((side1 == side2) && (side2 == side3) && (side1 == side3)) {
        return "equilateral";
    } else if ((side1 == side2) || (side2 == side3) || (side1 == side3)) {
        return "isosceles";
    } else {
        return "scalene";
    }
} else {
    return "not a triangle";
}

One more error: you forgot to put a space between This type of triangle is and your span, so it ends up like this:

This type of triangle isequilateral

To fix that, you obviously just need to insert a space:

<p>That type of triangle is <span class="tri"></span>.</p>

Once you fix all of that, it works fine.

Demo

Answer 2

A slightly different approach to that of AstroCB's excellent explanation - FIDDLE.

Minor points:

1. Make sure you have a place to put your results on the page ( $('place').html(result) or some other method).

2. I've switched parseInt to more rudimentary methods for "validation".

JS

$('#clickme').on('click', function(){
    var side1 = $("#side1").val();
    var side2 = $("#side2").val();
    var side3 = $("#side3").val();
        side1 = Math.abs( Math.round(side1) );
        side2 = Math.abs( Math.round(side2) );
        side3 = Math.abs( Math.round(side3) );
    var result = triangle( side1, side2, side3); 
    $(".putmehere").html( result );
});

function triangle  (side1, side2, side3)
{
    if( (side1 == side2) && (side2 == side3) )
      {
       return "Equilateral";
       }
     else if( (side1 == side2) || (side2 == side3) || (side3 == side1) )
      {
       return "Isosceles";
       }
     else 
      {
       return "Scalene";
       }
}