如何使用 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

要使用 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')

Answer 2

这里有几点需要注意：

首先，当你使用： 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接受一个字符串值。 您将其包装在[]中，这是不必要的。

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