вопрос
Добрый день!
Есть четыре input, в которых указываю время готовки блюда, и есть поле, где должно выводиться уже общее время.
Поля для ввода разбиты на часы и минуты, также один input куда и должно выводиться общее время.
Те самые поля:
Как сделать, чтобы всё это заработало должным образом?
Набросок кода:
Заранее спасибо!
Есть четыре input, в которых указываю время готовки блюда, и есть поле, где должно выводиться уже общее время.
Поля для ввода разбиты на часы и минуты, также один input куда и должно выводиться общее время.
Те самые поля:
<!-- Время подготовки -->
<input class="hour" type="text" name="clock_hour" value="">
<input class="minut" type="text" name="clock_minut" value="">
<!-- Время приготовления -->
<input class="hour" type="text" name="clock_hour1" value="">
<input class="minut" type="text" name="clock_minut1" value="">
<!-- Общее время готовки -->
<input class="itog_time" type="text" name="itog_time" value="">
Как сделать, чтобы всё это заработало должным образом?
Набросок кода:
var totalSeconds = document.getElementsByTagName("clock_hour")[0].value() * 3600 +
document.getElementsByTagName("clock_minut")[0].value() * 60 +
document.getElementsByTagName("clock_hour1")[0].value() * 3600 +
document.getElementsByTagName("clock_minut1")[0].value() * 60;
Заранее спасибо!
Разметка:
Сам JS:
Если нужно выводит результат именно в input, поменяйте в JS в самом конце строк innerText на value
<div class="inputs-wrapper">
<div class="cooking">
<p>Время готовки:</p>
<input class="hour cooking-hours" type="text" name="clock_hour" value="0">
<input class="minut cooking-mins" type="text" name="clock_minut" value="0">
</div>
<div class="prep">
<p>Время подготовки:</p>
<input class="hour prep-hours" type="text" name="clock_hour1" value="0">
<input class="minut prep-mins" type="text" name="clock_minut1" value="0">
</div>
</div>
<div class="output-wrapper">
<p>
Общее время:
<span class="total-hours">00</span>:
<span class="total-mins">00</span>
</p>
</div>
Сам JS:
document.addEventListener('DOMContentLoaded', function(){
let inputs = document.getElementsByTagName('input');
for(let i = 0; i < inputs.length; i++){
let input = inputs[i];
input.addEventListener('change', function(e){
let timeInSeconds = valuesToSeconds();
sec2time(timeInSeconds);
});
}
});
function valuesToSeconds(){
let totalSeconds = document.getElementsByClassName("cooking-hours")[0].value * 3600 +
document.getElementsByClassName("cooking-mins")[0].value * 60 +
document.getElementsByClassName("prep-hours")[0].value * 3600 +
document.getElementsByClassName("prep-mins")[0].value * 60;
return totalSeconds;
}
function sec2time(timeInSeconds) {
var pad = function(num, size) { return ('000' + num).slice(size * -1); },
time = parseFloat(timeInSeconds).toFixed(3),
hours = Math.floor(time / 60 / 60),
minutes = Math.floor(time / 60) % 60,
seconds = Math.floor(time - minutes * 60),
milliseconds = time.slice(-3);
setOutput(pad(hours, 2), pad(minutes, 2));
}
function setOutput(hours, minutes) {
document.getElementsByClassName("total-hours")[0].innerText = hours;
document.getElementsByClassName("total-mins")[0].innerText = minutes;
}
Если нужно выводит результат именно в input, поменяйте в JS в самом конце строк innerText на value
