How to subtract X hours to a time field

I would like to output in a div the result of a math calculation (subtract). In the specific I have a form with a <input type="time" id="time" name="time"> that let user pick up a time. I would like to display in another div the result of the chosen time – 3 Hours.

So if time chosen is 13:00 I would like to output in the div with class result-1 10:00.

How can I achieve this in JS?

<form action="/action_page.php">
  <label>Time:</label>
  <input type="time" id="time" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result</div>
</div>

What I tried is to replicate what explained here but without result?

Answer

When you read data from the <input> element, the math library cannot be used directly because it reads data of type String. So I developed two different solutions that exhibit two different behaviours.

Behaviour-1

The following solution extracts the selected time value based on a time stored in the secondTime array.

const time1 = document.getElementById('time1');
let result = document.getElementById('result');

// If you want to calculate the difference to the fixed time point,
// change the contents of the secondTime array.
let firstTime = []; secondTime = ["03", "00"]

// Function that prints the time difference to the DOM
function calculate() {
  if(firstTime.length != 0) {
    var hours = firstTime[0] - secondTime[0];
    var minutes = firstTime[1] - secondTime[1];
    result.innerHTML = "";
    result.insertAdjacentHTML("beforeend", `${hours}:${minutes}`);
  } 
}

// Event fired when <input> element changes 
time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}

<form action="/action_page.php">
  <label>First Time:</label>
  <input type="time" id="time1" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result: <span id="result"></span></div>
</div>

---

Behaviour-2

In the solution below, the value in the <input> element is parsed using the String.prototype.split() method and the time difference is calculated using the calculate() method. Edit the calculate() method for more accurate calculation.

const time1 = document.getElementById('time1');
const time2 = document.getElementById('time2');
let result = document.getElementById('result');
let firstTime = [], secondTime = [];

function calculate() {
  if(firstTime.length != 0 && secondTime.length != 0) {
    var hours = secondTime[0] - firstTime[0];
    result.innerHTML = "";
    result.insertAdjacentHTML("beforeend", `${hours} Hours`);
  } 
}

time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

time2.onchange = function() {
  secondTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}

<form action="/action_page.php">
  <label>First Time:</label>
  <input type="time" id="time1" name="time">
  
  <label>Second Time:</label>
  <input type="time" id="time2" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result: <span id="result"></span></div>
</div>