I am facing an issue with my timer where the span that was created to display a colon between the numbers does not change color along with the timer digits.
I attempted using
var colon = document.getElementById(":");<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
var direction = 'down';
var mins = 1;
var secs = mins * 60;
function colorchange(minutes, seconds) {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
var color;
if (direction == 'up') {
color = 'black';
} else if (secs <= 30) {
color = 'red';
} else if (secs <= 59) {
color = 'orange';
}
minutes.style.color = seconds.style.color = color
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
function countdown() {
setInterval(function() {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
minutes.value = getminutes();
seconds.value = getseconds();
colorchange(minutes, seconds);
if (direction == 'down') {
secs--;
if (secs <= 0) {
direction = 'up';
}
} else if (direction == 'up') {
secs++;
}
}, 1000);
}
countdown();
</script>
</head>
<body>
<div id="timer" style="width: 90%;">
<input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -2%;">
<input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -42%;">
<span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; padding-left: 42%;">: </span>
</div>
<script>
</script>