Detect when a has a value

Question

My goal is to use the value from two time inputs to calculate a total time between them. In order to achieve this I need to ensure that the values inside the time inputs are valid.

I would expect the result of the following code to perform the alert only when the input has a value. The actual result is an immediate alert.

let startTimeInput = document.getElementById("startTimeInput");
if (startTimeInput.value !== null) {
  alert("My input has a value!");
}

<input type="time" id="startTimeInput" name="startTimeInput">
<input type="time" id="endTimeInput" name="endTimeInput">

Answer 1

How to debug stuff like this

You shouldn't check only for null. If the check for null was working, it would have worked so we can suspect that the default value is not null.

On another note, (thanks to @MauriceNino for pointing it out in the comments), text inputs should not have any kind of null value according to https://stackoverflow.com/a/17240499/1688441 . Personally, I add these checks in all my code just to be sure since you may work at some point with other type of objects that may indeed be (or return) null.

In such cases it's very convenient to either debug using breakpoints, or to use console.log to get a value in the console.

Do a console.log to see the current value (which may be something like 0 or a value in ms since 1970).

Practical Experiment

I tried the specific console.log and saw an empty string.

To be sure that it was a string, you could also use the typeof function like this:

console.log("TYPE:");
console.log(typeof  document.getElementById("startTimeInput").value);

The result was :

TYPE:
string

Therefore I continued with the following and saw that the value is an empty string with size zero.

console.log(startTimeInput.value.length);
0

Therefore, you should check for a string of size zero.

Solution on how to check time

let startTimeInput = document.getElementById("startTimeInput");
if (startTimeInput.value !== null &&  startTimeInput.value.length>0) {
  alert('There is a value');
}

<input type="time" id="startTimeInput" onchange="startTimeInput(event);" name="startTimeInput">
<input type="time" id="endTimeInput" onchange="endTimeInput(event);" name="endTimeInput">

Calculating hours between Times

Below is a sample on how to bring everything together and calculate the hours between two dates. I used only JS for this, though it may be more convenient to have used a date library.

console.log("TYPE:");
console.log(typeof  document.getElementById("startTimeInput").value);

function calculateTimeBetween(){
    
let startTimeInput = document.getElementById("startTimeInput").value;
let endTimeInput = document.getElementById("endTimeInput").value;

if (timeHasNotValue(startTimeInput) || timeHasNotValue(endTimeInput)){
    alert("One of the dates has not been set");
  return;
}

console.log("TIMES:");
let startDate = (parseTime(startTimeInput));
let endDate = (parseTime(endTimeInput));

var diffHours = (endDate - startDate)/(1000*60*60); 
  

//From: https://stackoverflow.com/a/35463482/1688441
let n = new Date(0,0);
n.setSeconds(+diffHours * 60 * 60);
alert('Difference is ' + n.toTimeString().slice(0, 5) );

}

 function timeHasNotValue(timeInput){
  return (timeInput === null || timeInput.length==0);
}

function parseTime(timeString)
{
  if (timeString == '') return null;
  var d = new Date();
  var time = timeString.match(/(\d+)(:(\d\d))?\s*(p?)/i);
  d.setHours( parseInt(time[1],10) + ( ( parseInt(time[1],10) < 12 && time[4] ) ? 12 : 0) );
  d.setMinutes( parseInt(time[3],10) || 0 );
  d.setSeconds(0, 0);
  return d;
}
//From: https://stackoverflow.com/a/338439/1688441

<input type="time" id="startTimeInput" name="startTimeInput">
<input type="time" id="endTimeInput" name="endTimeInput">

<button onclick="calculateTimeBetween()">Calculate</button>

Answer 2

default value is '' not null, so check like this: if (startTimeInput.value !== '') ...

let startTimeInput = document.getElementById("startTimeInput");
console.log(startTimeInput.value !== null);
console.log(startTimeInput.value !== '');

<input type="time" id="startTimeInput" name="startTimeInput">
<input type="time" id="endTimeInput" name="endTimeInput">

Answer 3

function startTimeInput(e){
    var mindate = e.target.value;
    alert(mindate);
}

function endTimeInput(e){
    var mindate = e.target.value;
    alert(mindate);
}

<input type="time" id="startTimeInput" onchange="startTimeInput(event);" name="startTimeInput">
<input type="time" id="endTimeInput" onchange="endTimeInput(event);" name="endTimeInput">

You can try something like this by using onchange.