[英]How can I make this dropdown calculation work?
I'm fairly new to javascript, and I'm trying to calculate a value based on other dropdown values. 我对javascript还是相当陌生,我正在尝试根据其他下拉值计算一个值。
So there are three dropdowns, one for start time, one for end time and one for break time. 因此,共有三个下拉菜单,一个下拉菜单用于开始时间,一个下拉菜单用于结束时间,另一个下拉菜单用于休息时间。 There is a 4th input field for the total hours worked.
总工作时间有第四个输入字段。 Now, this is a manual field, but I intend to make this field automatically put in a value of the calculated time.
现在,这是一个手动字段,但是我打算让该字段自动输入计算出的时间值。
The page is build in wordpress with gravityforms. 该页面在Wordpress中使用gravityforms构建。
Initially, I tried using jQuery hashes to retrieve the values, but that didn't work, so now I've used the Document.getElementById. 最初,我尝试使用jQuery散列来检索值,但这没有用,所以现在我使用了Document.getElementById。
function CalcTime()
{
var time1 = Document.getElementById('input_16_2').value();
var time2 = Document.getElementById('input_16_3').value();
var time3 = Document.getElementById('input_16_4').value();
var time1 = time1.split(':');
var time2 = time2.split(':');
var time3 = time3.split(':');
var hours1 = parseInt(time1[0], 10),
hours2 = parseInt(time2[0], 10),
hours3 = parseInt(time3[0], 10),
mins1 = parseInt(time1[1], 10),
mins2 = parseInt(time2[1], 10),
mins3 = parseInt(time3[1], 10);
var hours = hours2 - hours1 - hours3;
var mins = 0;
if(mins2 >= mins1) {
mins = mins2 - mins1 - mins3;
}
else {
mins = (mins2 + 60) - mins1;
hours--;
}
if(mins < 9)
{
mins = '0'+mins;
}
if(hours < 9)
{
hours = '0'+hours;
}
$("#time_duration").val(hours+':'+mins);
Document.getElementById('input_16_5').value = $("#time_duration").val;
}
var showTime = Document.getElementById('input_16_5').value();
Document.getElementById('input_16_4').on("click", CalcTime)
{
showTime.show();
}
When using the console it says I can't use Document.getElementById
as a function, which I understand, however, I don't know what I can do to make it work. 使用控制台时,它说我不能将
Document.getElementById
用作函数,据我了解,但是,我不知道该怎么做才能使其正常工作。
https://jsfiddle.net/3aud5xL4/ https://jsfiddle.net/3aud5xL4/
now it works (no errors). 现在可以正常工作了(没有错误)。 you're mixing jQuery and vanilla JS in same function, that's why it wasn't working
您在同一函数中混合使用jQuery和Vanilla JS,这就是为什么它不起作用的原因
this is jQuery syntax 这是jQuery语法
$("#time_duration").val(hours + ':' + mins);
this is vanilla JS version 这是香草JS版本
document.getELementById('time_duration').value = hours + ':' + mins
try not to mix those 2 together, or you'll experience some odd results. 尽量不要将这两个混合在一起,否则您会遇到一些奇怪的结果。 also convert this
也转换这个
document.getElementById('input_16_5').value = $("#time_duration").val;
into 进入
document.getElementById('input_16_5').value = document.getElementById("time_duration").value;
and one more thing, you define same variables 2 times in your code. 还有一件事,您在代码中定义了两次相同的变量。 this is JS so it won't complain about it too much, but it's a bad practice.
这是JS,所以不会抱怨太多,但这是一个不好的做法。 so this
所以这
var time1 = Document.getElementById('input_16_2').value();
...
var time1 = time1.split(':');
will become this 会变成这个
var time1 = Document.getElementById('input_16_2').value.split(':')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.