我怎样才能使这个下拉计算工作？

Question

我是 javascript 的新手，我正在尝试根据其他下拉值计算一个值。

所以有三个下拉菜单，一个是开始时间，一个是结束时间，一个是休息时间。总工作时数有第 4 个输入字段。现在，这是一个手动字段，但我打算让这个字段自动输入计算时间的值。

该页面是使用 gravityforms 在 wordpress 中构建的。

最初，我尝试使用 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();
}

当使用控制台时，它说我不能将 Document.getElementById 作为一个函数使用，我明白这一点，但是，我不知道我能做些什么来让它工作。

Answer 1

https://jsfiddle.net/3aud5xL4/

现在可以使用了（没有错误）。你在同一个函数中混合 jQuery 和 vanilla JS，这就是它不起作用的原因

这是jQuery语法

$("#time_duration").val(hours + ':' + mins);

这是 vanilla JS 版本

document.getELementById('time_duration').value = hours + ':' + mins

尽量不要将这两个混合在一起，否则您会遇到一些奇怪的结果。也转换这个

document.getElementById('input_16_5').value = $("#time_duration").val;

进入

document.getElementById('input_16_5').value = document.getElementById("time_duration").value;

还有一件事，您在代码中定义了相同的变量 2 次。这是 JS，所以它不会抱怨太多，但这是一种不好的做法。所以这个

var time1 = Document.getElementById('input_16_2').value();
...
var time1 = time1.split(':');

会变成这样

var time1 = Document.getElementById('input_16_2').value.split(':')

我怎样才能使这个下拉计算工作？

How can I make this dropdown calculation work?

javascript

wordpress

time

dropdown

calculation