title: How can I get a time value from HTML using JavaScript?
body: <p>I'm trying to get the value of a time input element via JavaScript. When I try using <code>getElementById</code> the value that is displayed is:</p>
  
  <pre><code>[object HTMLInputElement]
  </code></pre>
  
  <p>If use <code>querySelectorAll</code>, the value is:</p>
  
  <pre><code>[NodeList]
  </code></pre>
  
  <p>I also tried to use the index, but nothing new happens.</p>
  
  <p>Here is my HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="principal-grid"&gt;
  
      &lt;title&gt;Hour Control&lt;/title&gt;
  
      &lt;label class="description-values"&gt;In&lt;/label&gt;
      &lt;input id="data-in" type="time" class="values"&gt;
  
      &lt;label class="description-values"&gt;Interval - Saída&lt;/label&gt;
      &lt;input id="data-interval-s" type="time" class="values"&gt;
  
      &lt;label class="description-values"&gt;Interval - Volta&lt;/label&gt;
      &lt;input id="data-interval-v" type="time" class="values"&gt;
  
      &lt;label class="description-values"&gt;Out&lt;/label&gt;
      &lt;input id="data-out" type="time" class="values"&gt;
  
      &lt;input id="submit" type="submit" class="send" value="Send"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the script:</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
  }
  </code></pre>