I got this html code:
<p class="day-left">
<span style="color: #000" id="countdown2"></span>
<span id="days">days</span> to <strong>the EVENT</strong>!
</p>
The output is:
3 days to the EVENT.
The countdown 2 is running a function that calculate the days left.
I want when the span countdown2 is = 1, the text of span days change to "day", not "days".
I tryed this code, but not worked:
if ($('span#countdown2:contains("<span style="color: #000" id="countdown2">1</span>")').length > 0) {
$("#days").write("day");
}
Any idea?
do you want something like this?
const countdown2 = document.getElementById("countdown2");
const days = document.getElementById("days");
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
countdown2.textContent = +countdown2.textContent - 1;
// you need these codes
if (+countdown2.textContent < 2) {
days.textContent = "day";
}
//
});<button>decrease</button>
<p class="day-left">
<span style="color: #000" id="countdown2">4</span>
<span id="days">days</span> to <strong>the EVENT</strong>!
</p> This helps ?
const days = document.getElementById("days")
const counter = document.getElementById("countdown2")
let count = 10
window.onload = () => {
counter.innerText = count
this.interval =
setInterval(() => {
count--
counter.innerText = count
days.innerText = count === 1 ? "day" : "days"
if (count <= 0) clearInterval(this.interval)
}, 1000)
}<p class="day-left">
<span style="color: #000" id="countdown2"></span>
<span id="days">days</span> to <strong>the EVENT</strong>!
</p>