Question

我对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作为函数，据我了解，但是，我不知道该怎么做才能使其正常工作。

Answer 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;

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

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

将成为这个

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

如何使此下拉列表计算有效？

1 个答案: