I am trying to make a timer and make it so that when the time gets below 10 seconds the text turns red. I am using backgorund-clip to style my text, but for some reason my js doesn't style the backgorund of the element I want.
Here is my JavaScript:
if (miliseconds < 10 && seconds < 10)
document.getElementById("timer").textContent = `0${seconds}:0${miliseconds}`;
else if (miliseconds < 10)
document.getElementById("timer").textContent = `${seconds}:0${miliseconds}`;
else if (seconds < 10)
{
document.getElementById("timer").textContent = `0${seconds}:${miliseconds}`;
document.getElementById("timer-back-2").style.background = "repeating-linear-gradient(to left, red, red 5px, black 5px, black 6px);";
}
else
{
document.getElementById("timer").textContent = `${seconds}:${miliseconds}`;
document.getElementById("timer-back-2").style.background = "repeating-linear-gradient(to left, blue, blue 5px, black 5px, black 6px);"
}
and here is my CSS:
#timer-back-2{
width: 100%;
height: 100%;
margin: 0;
background: repeating-linear-gradient(to left, yellow, yellow 5px, black 5px, black 6px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#timer{
width: 100%;
height: 100%;
margin: 0;
background: repeating-linear-gradient(to top, transparent, transparent 5px, black 5px, black 6px);
z-index: 3;
font-size: 50px;
font-family: "8-bit-operator";
display: flex;
justify-content: center;
align-items: center;
-webkit-background-clip: text;
background-clip: text;
}
Don't try to toggle the property value in javascript, use classes instead. Use background-image instead of background for repeating-linear-gradient(), otherwise the background property from the other classes might override the other background properties already set.
const timer = document.getElementById('timer-back-2');
// turn it red
timer.classList.add("red");
// turn it blue
timer.classList.remove("red");
timer.classList.add("blue");
// turn it yellow
timer.classList.remove("red");
timer.classList.remove("blue");
// demo changes color every second
window.setInterval(function() {
timer.classList.remove("blue");
timer.classList.remove("red");
const time = (new Date).getTime();
if (time % 2 == 0) {
timer.classList.add("red");
} else if (time % 3 == 0) {
timer.classList.add("blue");
}
}, 1000);#timer-back-2 {
width: 100px;
height: 100px;
font-size: 32px;
background-image: repeating-linear-gradient(to left, yellow, yellow 5px, black 5px, black 6px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#timer-back-2.red {
background-image: repeating-linear-gradient(to left, red, red 5px, black 5px, black 6px);
}
#timer-back-2.blue {
background-image: repeating-linear-gradient(to left, blue, blue 5px, black 5px, black 6px);
}<div id="timer-back-2">Back 2</div>