Я делаю таймер, сейчас будет код, описание проблемы ниже.
const hoursElement = document.querySelector('.hours');
const minutesElement = document.querySelector('.minutes');
const secondsElement = document.querySelector('.seconds');
const millisecondsElement = document.querySelector('.milliseconds');
const startBtn = document.querySelector('.start');
const stopBtn = document.querySelector('.stop');
const resetBtn = document.querySelector('.reset');
let hours = 0,
minutes = 0,
seconds = 0,
milliseconds = 0,
interval
function startTimer() {
milliseconds++;
milliseconds < 10 ? millisecondsElement.textContent = '0' + milliseconds : millisecondsElement.textContent = milliseconds;
if (milliseconds > 99) {
seconds++;
seconds < 10 ? secondsElement.textContent = '0' + seconds : secondsElement.textContent = seconds;
milliseconds = 0;
console.log(seconds + 's');
}
if (seconds > 59) {
minutes++;
minutes < 10 ? minutesElement.textContent = '0' + minutes : minutesElement.textContent = minutes;
seconds = 0;
console.log(minutes + 'm');
}
if (minutes > 59) {
hours++;
hours < 10 ? hoursElement.textContent = '0' + hours : hoursElement.textContent = hours;
minutes = 0;
console.log(hours);
}
if (hours > 23) {
stopTimer();
}
}
function stopTimer() {
clearInterval(interval);
}
function resetTimer() {
clearInterval(interval);
milliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
millisecondsElement.textContent = '00';
secondsElement.textContent = '00';
minutesElement.textContent = '00';
hoursElement.textContent = '00';
}
startBtn.addEventListener('click', () => {
clearInterval(interval);
interval = setInterval(startTimer, 10)
});
stopBtn.addEventListener('click', stopTimer);
resetBtn.addEventListener('click', resetTimer);
И HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Timer</title>
</head>
<body>
<div class="wrapper">
<div class="timer">
<div class="time_view">
<span class="hours t">00</span>
:
<span class="minuts t">00</span>
:
<span class="seconds t">00</span>
:
<span class="milliseconds t">00</span>
</div>
<div class="manage_btns">
<button class="manage_btn start">Start</button>
<button class="manage_btn stop">Stop</button>
<button class="manage_btn reset">Reset</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Проблема зключается в том что в консоли все работает идеально и миллисекунды и секунды и минуты, но когда я стараюсь вывести это на экран работают миллисекунды и секунды, а с минутами начинаются странности, оно их не выводит и выдает ошибку: "Cannot set properties of null (setting 'textContent')" в 28 строке, я не понимаю в чем тут проблема, в гугле были решения, но они не подходят тут, самое непонятное почему оно не работает только с минутами.
Простой
