My .style.background doesn't style the item-CodePudding

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

CodePudding user response：

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>