[英]How can I get a time value from HTML using JavaScript?
I'm trying to get the value of a time input element via JavaScript.我正在尝试通过 JavaScript 获取时间输入元素的值。 When I try using
getElementById
the value that is displayed is:当我尝试使用
getElementById
时,显示的值为:
[object HTMLInputElement]
If use querySelectorAll
, the value is:如果使用
querySelectorAll
,则值为:
[NodeList]
I also tried to use the index, but nothing new happens.我也尝试使用索引,但没有任何新的事情发生。
Here is my HTML:这是我的 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;
}
To get value of input using vanilla js, use.value property.要使用 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;
Also, getting element by id, use document.getElementById('elementId')此外,通过 id 获取元素,使用 document.getElementById('elementId')
A couple of things to note here:这里有几点需要注意:
First up, when you use: var dataIn = document.getElementById(...)
首先,当你使用:
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.它返回对由 Id 字符串标识的 html 元素的引用,并将其存储在您创建的 dataIn 变量中。 If you want the value of that element, you need to use:
dataIn.value
.如果你想要那个元素的值,你需要使用:
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.第二件事是
getElementById
接受一个字符串值。 You're wrapping it in []
's, which is unnecessary.您将其包装在
[]
中,这是不必要的。
One last note: type="time"
is not supported on all browsers.最后一点:并非所有浏览器都支持
type="time"
。 (Safari doesn't support it for example). (例如,Safari 不支持它)。 So you may want to look for an alternative method for collecting dates, if supporting macOS and iOS devices is important to you.
因此,如果支持 macOS 和 iOS 设备对您很重要,您可能需要寻找另一种收集日期的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.