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

【问题标题】：How can I make this dropdown calculation work?我怎样才能使这个下拉计算工作？
【发布时间】：2019-08-30 08:05:05
【问题描述】：

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

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

页面是在 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 用作函数，我理解，但是我不知道我可以做些什么来使它工作。

【问题讨论】：

JS 区分大小写，您要查找的是 document 而不是 Document
it says I can't use Document.getElementById as a function, which I understand, 这读起来很可爱。 :D
哎呀，谢谢！虽然它仍然不起作用并且仍然给出相同的错误
你能把jsfiddle.net 链接到所有的 JS 和 HTML 以便我仔细看看吗？
jsfiddle.net/10rsLz9g

标签： javascript wordpress time dropdown calculation

【解决方案1】：

https://jsfiddle.net/3aud5xL4/

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

这是 jQuery 语法

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

这是原生 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(':')

【讨论】：

谢谢！这让我更进一步:)