如何使用 JavaScript 从 HTML 中获取时间值？

Question

我正在尝试通过 JavaScript 获取时间输入元素的值。当我尝试使用getElementById显示的值时：[object HTMLInputElement]如果使用querySelectorAll，则值为：[NodeList]我也尝试使用索引，但没有任何新的事情发生。这是我的 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>这是脚本：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

这里有几点需要注意：

首先，当您使用时：var dataIn = document.getElementById(...)

它返回对由 Id 字符串标识的 html 元素的引用，并将其存储在您创建的 dataIn 变量中。如果你想要那个元素的值，你需要使用：dataIn.value。

这是您的脚本的更新版本，可以满足您的要求：

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;

}

第二件事是getElementById接受一个字符串值。您将其包装在[]'s 中，这是不必要的。

最后一点：type="time"并非所有浏览器都支持。（例如，Safari 不支持它）。因此，如果支持 macOS 和 iOS 设备对您很重要，您可能需要寻找另一种收集日期的方法。

Answer 2

要使用 vanilla js 获取输入值，请使用 .value 属性。

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;

此外，通过 id 获取元素，使用 document.getElementById('elementId')