如何使用 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) {&nbsp; &nbsp; //test&nbsp; &nbsp; document.getElementById("test").innerHTML = dataIn.value + ' ' + dataInterval_out.value +&nbsp; &nbsp; &nbsp; &nbsp; ' ' + 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')