1. 首页
  2. 问题列表
  3. 按钮单击时函数不执行
提问者：小点点

按钮单击时函数不执行


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

  <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练习之后，这个问题仍然困扰着我。


共3个答案

匿名用户

编码中的问题:

>

  • 脚本标记位于正文标记之前。

    不将从输入获取的字符串值转换为数字

    null

    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>

    • 匿名用户

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

    请尝试以下操作:

    <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

    匿名用户

    您只需要在创建所有DOM元素之后执行脚本即可。 因为当您查询DOM元素时，浏览器无法找到它，因为它还没有创建。

    要解决此问题，请在关闭标记之前放置