Почему я продолжаю получать неверный результат при этом. Неправильное вычисление и не удается создать предупреждение о пустом вводимом тексте

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в сочетании HTML с JavaScript. Это моя домашняя работа, и в моем коде есть некоторые проблемы, нужен эксперт, чтобы взглянуть. Вот в чем вопрос.

Если отработанное время превышает 40 часов, вычислите, используя обычную скорость в 1,5 раза больше для дополнительных часов. Например, если кто-то работает 50 часов и уплаченная ставка составляет 10,00 долларов США в час, общая сумма оплаты должна составлять 550,00 долларов США.

Мой код :

 <!DOCTYPE html>
<html>

<head>
  <script type="text/javascript">
    function calc() {
      var employ_name = document.getElementById('employ_name').value;
      var rate_pay = parseInt(document.getElementById('rate_pay').value);
      var hour_work = parseInt(document.getElementById('hour_work').value);
      if (hour_work <= 40) {
        alert("Paid Amount For "   employ_name   " is RM "   rate_pay * hour_work);
      } else {
        alert((40 * 1.5)   (c - 40) * c * 1.5);
      }
    }

    function calc() {
      if (document.getElementById("employ_name").value == "") {
        alert("PLEASE ENTER THE VALUE!");
        return false;
      } else if (document.getElementById("employ_no").value == "") {
        alert("PLEASE ENTER THE VALUE!");
        return false;
      } else if (document.getElementById("rate_pay").value == "" {
          alert("PLEASE ENTER THE VALUE!");
          return false;
        } else {
          alert("PLEASE ENTER THE VALUE!");
          return false;
        }
      }
  </script>
  <title></title>
</head>

<body>

  <form action="url" METHOD="POST">
    <table>
      <tr>
        <td>Employee Name :</td>
        <td><input type="text" id="employ_name"></td>
      </tr>
      <tr>
        <td>Employee No :</td>
        <td><input type="text" id="employ_no"></td>
      </tr>
      <tr>
        <td>Rate of Pay :</td>
        <td><input type="text" id="rate_pay"></td>
      </tr>
      <tr>
        <td>Hours Work :</td>
        <td><input type="text" id="hour_work"></td>
      </tr>
      <tr>
        <td><input type="button" id="Button" value="Submit" onclick="calc()"></td>
      </tr>

    </table>

  </form>

</body>

</html>  

Комментарии:

1. При вызове calc() какой из ваших двух функций вы ожидаете выполнить и почему? Какова цель второго, которое вы не ожидаете выполнить?

2. У вас есть две функции с именами calc() .

3. как мне поступить, если я хочу использовать одно имя функции для отображения результата, а также предупреждение о пустом текстовом поле?

4. @AlvisLim: Если вам нужны две функции, дайте им разные имена, чтобы вы могли их вызывать. Если вам нужна одна функция, используйте одну функцию.

Ответ №1:

У вас есть несколько проблем с вашим кодом:

  1. В настоящее время ваш синтаксис неверен, вам нужно исправить это, добавив закрывающую скобку в ваш if оператор:

     (document.getElementById("rate_pay").value == "") {...}
      
  2. У вас есть две функции с одинаковым именем. Вместо этого вам нужно присвоить вашей второй функции другое имя, например checkInputs , чтобы при вызове calc функции она вызывала ожидаемую функцию.

  3. Ваша вторая calc функция ( checkInputs ) не должна возвращаться, false если все if-statments завершается неудачей. Вместо этого вы должны возвращать, true если они все fail , поскольку это означает, что все они не пустые.

  4. Чтобы заставить вашу calc функцию проверять, что все ваши входные данные имеют значение внутри них, вы можете вызвать свою вторую calc функцию (сейчас checkInputs ) внутри вашей первой calc функции. Таким образом, вы можете использовать if инструкцию, чтобы проверить, возвращает ли что checkInputs , и, таким образом, действовать соответствующим образом.

Смотрите пересмотренный код ниже:

 <!DOCTYPE html>
<html>

<head>
  <script type="text/javascript">
    function calc() {
      if (checkInputs()) { // check if `checkInputs` returned true or false
        var employ_name = document.getElementById('employ_name').value;
        var rate_pay = parseInt(document.getElementById('rate_pay').value);
        var hour_work = parseInt(document.getElementById('hour_work').value);
        if (hour_work <= 40) {
          alert("Paid Amount For "   employ_name   " is RM "   rate_pay * hour_work);
        } else {
          // commented out as you have not show us what "c" is:
          // alert((40 * 1.5)   (c - 40) * c * 1.5);
        }
      } else { // if check inputs returned false then you can output error message
        alert("PLEASE ENTER THE VALUE!");
      }
    }

    function checkInputs() {
      if (document.getElementById("employ_name").value.trim() == "") {
        return false;
      } else if (document.getElementById("employ_no").value.trim() == "") {
        return false;
      } else if (document.getElementById("rate_pay").value.trim() == "") {
        return false;
      }
      return true;
    }
  </script>
  <title>Calculator</title>
</head>

<body>

  <form action="url" method="POST">
    <table>
      <tr>
        <td>Employee Name :</td>
        <td><input type="text" id="employ_name"></td>
      </tr>
      <tr>
        <td>Employee No :</td>
        <td><input type="text" id="employ_no"></td>
      </tr>
      <tr>
        <td>Rate of Pay :</td>
        <td><input type="text" id="rate_pay"></td>
      </tr>
      <tr>
        <td>Hours Work :</td>
        <td><input type="text" id="hour_work"></td>
      </tr>
      <tr>
        <td><input type="button" id="Button" value="Submit" onclick="calc()"></td>
      </tr>

    </table>

  </form>

</body>

</html>  

Примечание: В вашем checkInputs() методе я также использовал .trim() . Это удалит начальные / конечные пробелы во входных данных. Это означает, что если кто-то должен был ввести только пробелы, то checkInputts вернет false isntead of true .

Комментарии:

1. Привет, Ник, спасибо за твое исправление. Теперь мой код может корректно выполняться с корректным выводом. Спасибо за ваш совет.

2. @AlvisLim не беспокойтесь :)))