Как я могу получить значение времени из HTML, используя JavaScript?

Question

Я пытаюсь получить значение элемента ввода времени через JavaScript. Когда я пытаюсь использовать getElementById, отображается значение:

[object HTMLInputElement]

При использовании querySelectorAll значение:

[NodeList]

Я также пытался использовать индекс, но ничего нового не происходит.

Вот мой 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>

А вот скрипт:

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

Answer 1

Здесь следует отметить пару вещей:

Во-первых, когда вы используете: var dataIn = document.getElementById(...)

Он возвращает ссылку на элемент html, идентифицированный строкой Id, и сохраняет это в созданной вами переменной dataIn. Если вам нужно значение этого элемента, вам нужно использовать: dataIn.value.

Вот обновленная версия вашего скрипта, которая делает то, что я думаю, вы хотите:

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

Во-вторых, getElementById принимает строковое значение. Вы заключаете его в символы [], что необязательно.

И последнее замечание: type="time" поддерживается не всеми браузерами. (Например, Safari не поддерживает это). Так что вы можете поискать альтернативный метод сбора дат, если для вас важна поддержка macOS и устройств iOS.

Answer 2

Чтобы получить значение ввода с использованием 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;

Также, получая элемент по id, используйте document.getElementById ('elementId')