Change a string text if another contains a certain value-CodePudding

I got this html code:

<p >
   <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?

CodePudding user response：

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 >
   <span style="color: #000" id="countdown2">4</span> 
   <span id="days">days</span> to <strong>the EVENT</strong>!
</p>

CodePudding user response：

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 >
  <span style="color: #000" id="countdown2"></span>
  <span id="days">days</span> to <strong>the EVENT</strong>!
</p>