How can I get a time value from HTML using JavaScript?

Question

I'm trying to get the value of a time input element via JavaScript. When I try using getElementById the value that is displayed is:

[object HTMLInputElement]

If use querySelectorAll , the value is:

[NodeList]

I also tried to use the index, but nothing new happens.

Here is my HTML:

<div class="principal-grid">

    <title>Hour Control</title>

    <label class="description-values">In</label>
    <input id="data-in" type="time" class="values">

    <label class="description-values">Interval - Saída</label>
    <input id="data-interval-s" type="time" class="values">

    <label class="description-values">Interval - Volta</label>
    <input id="data-interval-v" type="time" class="values">

    <label class="description-values">Out</label>
    <input id="data-out" type="time" class="values">

    <input id="submit" type="submit" class="send" value="Send">

</div>

And this is the script:

var dataIn = document.getElementById(['data-in']);
var dataInterval_out = document.getElementById(['data-interval-s']);
var dataInterval_in = document.getElementById(['data-interval-v']);
var dataOut = document.getElementById(['data-out']);

document.getElementById("submit").onclick = function (e) {

    //test
    document.getElementById("test").innerHTML = dataIn + ' ' + dataInterval_out +
        ' ' + dataInterval_in + ' ' + dataOut;
}

Answer 1

To get value of input using vanilla js, use.value property.

var dataIn = document.getElementById('data-in').value;
var dataInterval_out = document.getElementById('data-interval-s').value;
var dataInterval_in = document.getElementById('data-interval-v').value;
var dataOut = document.getElementById('data-out').value;

Also, getting element by id, use document.getElementById('elementId')

Answer 2

A couple of things to note here:

First up, when you use: var dataIn = document.getElementById(...)

It's returning a reference to the html element identified by the Id string and storing it in the dataIn variable you created. If you want the value of that element, you need to use: dataIn.value .

Here's an updated version of your script that does what I think you want:

var dataIn = document.getElementById('data-in');
var dataInterval_out = document.getElementById('data-interval-s');
var dataInterval_in = document.getElementById('data-interval-v');
var dataOut = document.getElementById('data-out');

document.getElementById("submit").onclick = function (e) {

    //test
    document.getElementById("test").innerHTML = dataIn.value + ' ' + dataInterval_out.value +
        ' ' + dataInterval_in.value + ' ' + dataOut.value;
}

The second thing is that getElementById takes a string value. You're wrapping it in [] 's, which is unnecessary.

One last note: type="time" is not supported on all browsers. (Safari doesn't support it for example). So you may want to look for an alternative method for collecting dates, if supporting macOS and iOS devices is important to you.