Changes in time picker should also changes the time input field

Question

I've got this code to show the total minutes in an input field. I would like to have changes in it whenever a user picks a different time in the time picker and the time in the input field also changes. How would I get that goal? This is the code I used:

 const getSeconds = s => s.split(":").reduce((acc, curr) => acc * 60 + +curr, 0); var seconds1 = getSeconds(document.getElementById("stime").value); var seconds2 = getSeconds(document.getElementById("etime").value); var res = Math.abs(seconds2 - seconds1); var hours = Math.floor(res / 3600); var minutes = Math.floor(res % 3600 / 60); var seconds = res % 60; document.getElementById("time").value = seconds;

 <div> <div class="form-floating"> <input id="stime" class="form-control" required name="stime" type="time" value="12:00" /> <label for="stime">Start Time</label> </div> </div> <div> <div class="form-floating"> <input id="etime" class="form-control" required name="etime" type="time" value="12:30" /> <label for="etime">End Time</label> </div> </div> <div> <div class="form-floating"> <input id="time" class="form-control" name="time" type="text" /> <label for="time">Time</label> </div> </div>

This is how image looks like...

Answer 1

These are the codes I have so far for this.

 const getSeconds = s => s.split(":").reduce((acc, curr) => acc * 60 + +curr, 0); var seconds1 = getSeconds(document.getElementById("stime").value); var seconds2 = getSeconds(document.getElementById("etime").value); var res = Math.abs(seconds2 - seconds1); var hours = Math.floor(res / 3600); var minutes = Math.floor(res % 3600 / 60); var seconds = res % 60; document.getElementById("time").value = seconds;

 <div> <div class="form-floating"> <input id="stime" class="form-control" required name="stime" type="time" value="12:00" /> <label for="stime">Start Time</label> </div> </div> <div> <div class="form-floating"> <input id="etime" class="form-control" required name="etime" type="time" value="12:30" /> <label for="etime">End Time</label> </div> </div> <div> <div class="form-floating"> <input id="time" class="form-control" name="time" type="text" /> <label for="time">Time</label> </div> </div>

Answer 2

The best practice is to move the calculation parts of your code into a function and call that function once the page is loaded and when any change is made to the inputs.

 const getSeconds = s => s.split(":").reduce((acc, curr) => acc * 60 + +curr, 0); const twoDigit = s => s < 10? '0'+s: s; const timeToMins = s => s.split(':')[0]*60 + +s.split(':')[1]; const formatTime = s => { let hours = Math.floor(s / 60); let minutes = Math.floor(s % 60); return `${twoDigit(hours)}:${twoDigit(minutes)}` } const updateInput = () => { let start = getSeconds(document.getElementById("stime").value); let end = getSeconds(document.getElementById("etime").value); let res = Math.abs(end - start); let diff = formatTime(res) document.getElementById("time").value = diff; } const updateEnd = () => { let start = getSeconds(document.getElementById("stime").value); let diff = document.getElementById("time").value let end = formatTime(start+timeToMins(diff)) document.getElementById("etime").value = end; } updateInput()

 <div> <div class="form-floating"> <input id="stime" onchange="updateInput()" class="form-control" required name="stime" type="time" value="12:00" /> <label for="stime">Start Time</label> </div> </div> <div> <div class="form-floating"> <input id="etime" onchange="updateInput()" class="form-control" required name="etime" type="time" value="12:30" /> <label for="etime">End Time</label> </div> </div> <div> <div class="form-floating"> <input id="time" onkeyup="updateEnd()" class="form-control" name="time" type="text" /> <label for="time">Time Difference</label> </div> </div>