Как вычесть значение в текстовом поле, используя JQuery?

Question

Я создал страницу html, на которой сотрудники могут вводить время входа и выхода с помощью текстового поля, а рядом с ним - строка, показывающая, работал ли сотрудник полный рабочий день (время выхода - во времени> = 8 часов) или если это полдня et c.

Я не уверен, как узнать количество отработанных часов. Я попробовал это, но не сработало

function myFunction() {
  var inTime = parseInt($("#in-time").val());
  var outTime = parseInt($("#out-time").val());
  var workHours = outTime - inTime;

  if (workHours => 8) {
    $("#value").text('Full Day')
  } else if workHours < 8) {
    $("#value").text('Half Day')
  } else {
    $("#value").text('error')
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="table-custom2">Employee Name</th>
    <th class="table-custom2">In Time</th>
    <th class="table-custom2">Out Time</th>
    <th class="table-custom2">Unnamed</th>
  </tr>

  <tr>
    <td class="table-custom2">Test User</td>
    <td class="table-custom3"><input type="text" id="in-time" class="input-xsmall"></td>
    <td class="table-custom3"><input type="text" id="out-time" class="input-xsmall" onkeyup="myFunction()"></td>
    <td class="table-custom3"><span id="value"></span></td>
  </tr>
</table>

Answer 1

У вас есть опечатки в => должны быть >= и пропущенные ( после else if:

if (workHours >= 8) {
  $("#value").text('Full Day')
} else if (workHours < 8) {

function myFunction() {
  var inTime = parseInt($("#in-time").val());
  var outTime = parseInt($("#out-time").val());
  var workHours = outTime - inTime;

  if (workHours >= 8) {
    $("#value").text('Full Day')
  } else if (workHours < 8) {
    $("#value").text('Half Day');
  } else {
    $("#value").text('error');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table>
  <tr>
    <th class="table-custom2">Employee Name</th>
    <th class="table-custom2">In Time</th>
    <th class="table-custom2">Out Time</th>
    <th class="table-custom2">Unnamed</th>
  </tr>

  <tr>
    <td class="table-custom2">Test User</td>
    <td class="table-custom3"><input type="text" id="in-time" class="input-xsmall"></td>
    <td class="table-custom3"><input type="text" id="out-time" class="input-xsmall" onkeyup="myFunction()"></td>
    <td class="table-custom3"><span id="value"></span></td>
  </tr>

</table>

Answer 2

Это хорошее начало с того, что вы сделали, и оно работает, когда вы исправляете некоторые ошибки, на которые указали другие >=, а не =>, но ваш код прямо сейчас предполагает, что они начинаются и заканчиваются sh в утром или в начале и заканчивая sh во второй половине дня, если вы хотите иметь возможность рассчитать начало утром и заканчивая sh днем, вам нужно будет добавить немного больше.

Есть многие js плагины, которые позволяют вам выбрать время, например https://momentjs.com/, могут помочь вам установить время и вычислить разницу в часах. Это может быть хорошим следующим шагом в том, что вы пытаетесь сделать

Затем вы сможете сделать что-то вроде этого

var duration = moment.duration(outTime.diff(inTime));
var workHours = duration.asHours();

Тогда ваши пользователи смогут добавить 8:00 утра. как время, которое вы можете отформатировать

Answer 3

Я использовал onInput, чтобы решить эту проблему.

function myFunction() {
  var inTime = parseInt($("#in-time").val());
  var outTime = parseInt($("#out-time").val());
  var workHours = outTime - inTime;
  console.log(workHours);
  if(workHours >= 8) $('#value').text('Full');
  else if(workHours < 8 && workHours > 0) $('#value').text( 'Half');
  else console.log('error');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="table-custom2">Employee Name</th>
    <th class="table-custom2">In Time</th>
    <th class="table-custom2">Out Time</th>
    <th class="table-custom2">Unnamed</th>
  </tr>

  <tr>
    <td class="table-custom2">Test User</td>
    <td class="table-custom3"><input type="text" id="in-time" class="input-xsmall"></td>
    <td class="table-custom3"><input type="text" id="out-time" class="input-xsmall" onInput="myFunction()"></td>
    <td class="table-custom3"><span id="value"></span></td>
  </tr>
</table>

Answer 4

Вы пропустили { в другом месте, если и измените на >= не =>

function myFunction() {
  var inTime = parseInt($("#in-time").val());
  var outTime = parseInt($("#out-time").val());
  var workHours = outTime - inTime;

  if (workHours => 8) {
    $("#value").text('Full Day')
  } else if (workHours < 8) {
  $("#value").text('Half Day')
} else 
{
  $("#value").text('error')
}
}

<html lang="en">

<head>
  <title>Tutorial</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <table>
    <tr>
      <th class="table-custom2">Employee Name</th>
      <th class="table-custom2">In Time</th>
      <th class="table-custom2">Out Time</th>
      <th class="table-custom2">Unnamed</th>
    </tr>

    <tr>
      <td class="table-custom2">Test User</td>
      <td class="table-custom3"><input type="text" id="in-time" class="input-xsmall"></td>
      <td class="table-custom3"><input type="text" id="out-time" class="input-xsmall" onkeyup="myFunction()"></td>
      <td class="table-custom3"><span id="value"></span></td>
    </tr>

  </table>

</body>

</html>