Function not executing on button click

Question

Once again I'm having Javascript woes. I'm making a script that calculates the type, perimeter and area of a triangle given its sides' lengths, but the script I've written does not fire upon clicking the insert button.

  <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>

I don't know what to do, I've tried everything I could find - including the right answer to a prior JS problem I've had - but nothing worked. In fact, it's a problem that continues to haunt me even after doing many JS exercises.

Did shows any error on console?

Rafv
– Rafv

2020-07-14 13:26:01 +00:00
Commented Jul 14, 2020 at 13:26 — Rafv
– Rafv, Commented Jul 14, 2020 at 13:26

glinda93 · Accepted Answer · 2020-07-14 13:44:31Z

Problem in your coding:

Script tag is before body tag.
Doesn't convert string values acquired from input to number

Working Code Here

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>

vadimk7 · Accepted Answer · 2020-07-14 13:37:23Z

1

It's because the script executes before documents loading.

Try this:

<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

answered Jul 14, 2020 at 13:37

vadimk7

8,4071 gold badge15 silver badges16 bronze badges

Comments

TheMisir · Accepted Answer · 2020-07-14 13:46:59Z

You just need to execute script after creating all DOM elements. Because when you query a DOM element browser can't found it because it haven't created yet.

To solve this issue place <script> before closing </body> tag. Or add onclick attribute to <button>.

Check the working code:

<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>

I also fixed some major issues. For example you re setting function to innerHTML instead of function result. To get function result you need to call it using (). That's it. The code is working now.

Collectives™ on Stack Overflow

Function not executing on button click

3 Answers 3

Working Code Here

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Working Code Here

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related