Question

我的HTML和JavaScript指向了正确的方向。功能和规格适用于Mocha Spec Runner。 HTML提交按钮有效。唯一的问题是它在我的网页上没有返回任何结果。

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

如果您的网页上没有显示任何内容，则可能意味着很多事情。首先要检查的是您的控制台/开发人员工具是否存在错误。

引用文件的方式可能有问题：js/jquery-1.11.1.min.js指向必须与网页位于同一目录中的文件。 js/script.js和您的样式表也是如此。

我把你的代码放到了小提琴here中，它适用于等边效果。但是，正如nnnnnn所指出的那样，你不应该将两侧与预定长度进行比较，你应该将它们相互比较。

此外，您没有if-else链的后备声明：

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";
}

如果side1不等于1或2，会发生什么？你的函数什么都不返回，这是一个问题。 JavaScript很不错，这就是为什么错误会让你失误，但这很重要。您需要添加最终的else语句（在这种情况下，这意味着只需将not a triangle作为后备）：

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";
}

我可能应该让你自己完成三角逻辑，以防它是你的任务的一部分，但我被带走了，所以我继续前进并做到了。我会向你解释一下：

首先，您必须检查两侧是否可以在数学上形成三角形。这很简单：双方必须满足以下条件。

对于边长为a，b和c的三角形：

a + b＆gt; ç
b + c＆gt;一个
a + c＆gt; B'/ LI>
然后，你必须检查类型。

如果是等边的，则所有边长均相等。如果是等腰，则两个边长相等。否则，它是斜角（没有边长相等）。

在代码中：
```
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";
}
```
还有一个错误：您忘了在This type of triangle is和span之间留一个空格，所以它最终会这样：

这种三角形是等边的

要解决这个问题，你显然只需要插入一个空格：
```
<p>That type of triangle is <span class="tri"></span>.</p>
```
一旦解决了所有问题，它就可以正常工作。

Demo

Answer 2

与AstroCB的出色解释略有不同 - FIDDLE。

小点：

确保您可以将结果放在页面上（$（'place'）。html（结果）或其他方法）。
我已将parseInt切换为“验证”的更基本方法。

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";
       }
}

三角形计算的结果不会出现

2 个答案: