此处工作代码

Question

我再次遇到Javascript问题。我正在编写一个脚本，根据给定的边长计算三角形的类型，周长和面积，但是我编写的脚本在单击“插入”按钮时不会触发。

  <head>
    <script type="text/javascript">
        document.getElementById("add").addEventListener("click", triangleCheck);
        function triangleCheck(){
            var A = document.getElementById("a").value;
            var B = document.getElementById("b").value;
            var C = document.getElementById("c").value;
            var valido = function(){
                if((A < B+C) && (B < A+C) && (C < A+B)){
                    return true;
                }else{
                    return false;
                }
            };
            this.v=valido();
            this.perimetro = function(){
                if(valido() == true){
                    return A+B+C;
                }else{
                    return "triangolo non valido";
                }
            };
            var s = this.perimetro()/2;
            this.area = function(){
                if(valido() == true){
                    return Math.sqrt(s*(s−A)*(s−B)*(s−C));
                }else{
                    return "triangolo non valido";
                }
            };
            this.tipo = function(){
                if(valido() == true){
                    if(A == B && B == C && C == A){
                        return equilatero;
                    }else if(A == B || B == C || C == A){
                        return isoscele;
                    }else{
                        return scaleno;
                    }
                }else{
                    return "triangolo non valido";
                }
            };
            document.getElementById("periTri").innerHTML = this.perimetro;
            document.getElementById("areaTri").innerHTML = this.area;
            document.getElementById("tipoTri").innerHTML = this.tipo;
        }
    </script>
  </head>
  <body>
    <h3>Inserisci i tre lati del triangolo:</h3><br>
    <form id="lati">
      <label for="a">A</label>
      <input type="text" id="a" name="a"><br>
      <label for="b">B</label>
      <input type="text" id="b" name="b"><br>
      <label for="c">C</label>
      <input type="text" id="c" name="c"><br>
      <br>
      <button type="button" id="add" name="add" value="Inserisci"></button>
    </form>
    <ul id="periTri"></ul>
    <ul id="areaTri"></ul>
    <ul id="tipoTri"></ul>
  </body>
</html>

我不知道该怎么办，我已经尝试了所有可能的方法-包括对我以前遇到的JS问题的正确答案-但没有任何效果。实际上，即使进行了许多JS练习，这个问题仍然困扰着我。

Answer 1

编码中的问题：

脚本标签在正文标签之前。
不将从输入中获取的字符串值转换为数字

此处工作代码

document.getElementById("add").addEventListener("click", triangleCheck);

function triangleCheck() {
  // input values are always string, cast them to numbers
  var A = Number(document.getElementById("a").value);
  var B = Number(document.getElementById("b").value);
  var C = Number(document.getElementById("c").value);
  var valido = function() {
    // if you don't cast string to number, below condition won't work
    if (A < B + C && B < A + C && C < A + B) {
      return true;
    } else {
      return false;
    }
  };
  this.v = valido();
  this.perimetro = function() {
    if (valido() == true) {
      return A + B + C;
    } else {
      return "triangolo non valido";
    }
  };
  var s = this.perimetro() / 2;
  this.area = function() {
    if (valido() == true) {
      return Math.sqrt(s * (s - A) * (s - B) * (s - C));
    } else {
      return "triangolo non valido";
    }
  };
  this.tipo = function() {
    if (valido() == true) {
      if (A == B && B == C && C == A) {
        return "equilatero";
      } else if (A == B || B == C || C == A) {
        return "isoscele";
      } else {
        return "scaleno";
      }
    } else {
      return "triangolo non valido";
    }
  };
  document.getElementById("periTri").innerHTML = this.perimetro();
  document.getElementById("areaTri").innerHTML = this.area();
  document.getElementById("tipoTri").innerHTML = this.tipo();
}

<html>

<body>
  <h3>Inserisci i tre lati del triangolo:</h3><br>
  <form id="lati">
    <label for="a">A</label>
    <input type="text" id="a" name="a"><br>
    <label for="b">B</label>
    <input type="text" id="b" name="b"><br>
    <label for="c">C</label>
    <input type="text" id="c" name="c"><br>
    <br>
    <button type="button" id="add" name="add" value="Inserisci">Inserisci</button>
  </form>
  <ul id="periTri"></ul>
  <ul id="areaTri"></ul>
  <ul id="tipoTri"></ul>
</body>
<!-- Move your script tag here !!! -->
</html>

Answer 2

这是因为脚本在文档加载之前执行。

尝试一下：

<head>
  <script type="text/javascript">
    function onload() {
      document
        .getElementById('add')
        .addEventListener('click', triangleCheck);

      function triangleCheck() {
        // your logic here
        console.log('check');
      }
    }

    document.addEventListener('DOMContentLoaded', onload);
  </script>
</head>
<body>
 <!-- your content here -->
</body>

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

Answer 3

您只需要在创建所有DOM元素后执行脚本即可。因为当您查询DOM元素时，浏览器因为尚未创建而找不到它。

要解决此问题，请先关闭<script>标签，再</body>。或将onclick属性添加到<button>。

检查工作代码：

<body>
  <h3>Inserisci i tre lati del triangolo:</h3><br>
  <form id="lati">
    <label for="a">A</label>
    <input type="text" id="a" name="a"><br>
    <label for="b">B</label>
    <input type="text" id="b" name="b"><br>
    <label for="c">C</label>
    <input type="text" id="c" name="c"><br>
    <br>
    <button type="button" id="add" name="add" value="Inserisci"></button>
  </form>
  <ul id="periTri"></ul>
  <ul id="areaTri"></ul>
  <ul id="tipoTri"></ul>

  <script type="text/javascript">
    document.getElementById("add").addEventListener("click", triangleCheck);

    function triangleCheck() {
      var A = document.getElementById("a").value;
      var B = document.getElementById("b").value;
      var C = document.getElementById("c").value;
      var valido = function() {
        if ((A < B + C) && (B < A + C) && (C < A + B)) {
          return true;
        } else {
          return false;
        }
      };
      this.v = valido();
      this.perimetro = function() {
        if (valido() == true) {
          return A + B + C;
        } else {
          return "triangolo non valido";
        }
      };
      var s = this.perimetro() / 2;
      this.area = function() {
        if (valido() == true) {
          return Math.sqrt(s * (s - A) * (s - B) * (s - C));
        } else {
          return "triangolo non valido";
        }
      };
      this.tipo = function() {
        if (valido() == true) {
          if (A == B && B == C && C == A) {
            return 'equilatero';
          } else if (A == B || B == C || C == A) {
            return 'isoscele';
          } else {
            return 'scaleno';
          }
        } else {
          return "triangolo non valido";
        }
      };
      document.getElementById("periTri").innerHTML = this.perimetro();
      document.getElementById("areaTri").innerHTML = this.area();
      document.getElementById("tipoTri").innerHTML = this.tipo();
    }
  </script>
</body>

我还解决了一些主要问题。例如，您将功能重新设置为innerHTML而不是功能结果。要获得函数结果，您需要使用()对其进行调用。而已。该代码现在可以正常工作。

单击按钮未执行功能

3 个答案:

此处工作代码