Функция не выполняется при нажатии кнопки - PullRequest
Новая
       5

Функция не выполняется при нажатии кнопки

0 голосов
/ 14 июля 2020

И снова у меня 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 упражнений.

Ответы [ 3 ]

3 голосов
/ 14 июля 2020

Проблема в вашей кодировке:

  1. Тег сценария находится перед тегом тела.

  2. Не преобразует строковые значения, полученные из ввода, в число

Здесь рабочий код 

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>
1 голос
/ 14 июля 2020

Вам просто нужно запустить скрипт после создания всех элементов 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>

Я также исправил некоторые серьезные проблемы. Например, вы устанавливаете функцию на внутренний HTML вместо результата функции. Чтобы получить результат функции, ее нужно вызвать с помощью (). Вот и все. Код сейчас работает.

1 голос
/ 14 июля 2020

Это потому, что сценарий выполняется перед загрузкой документов.

Попробуйте следующее: 

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...