why text replacing is not working in this script?

Question

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('February 03, 2021 20:35:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
    if (distance < 0) {
      clearInterval(x);
      return
    }
    var hours = Math.floor((distance % (day)) / (hour));
    var days = Math.floor(distance / (day));
    var minutes = Math.floor((distance % (hour)) / (minute));
    var seconds = Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10) ? '0' + days : days,
      document.getElementById('hours').innerText = (hours < 10) ? '0' + hours : hours,
      document.getElementById('minutes').innerText = (minutes < 10) ? '0' + minutes : minutes,
      document.getElementById('seconds').innerText = (seconds < 10) ? '0' + seconds : seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
} else {
  document.getElementById('days').innerText = '00';
  document.getElementById('hours').innerText = '00';
  document.getElementById('minutes').innerText = '00';
  document.getElementById('seconds').innerText = '00';
  document.body.innerHTML = document.body.innerHTML.replace('open', 'close');
}

#timer {
  list-style-type: none;
  justify-content: center;
  display: flex;
}

#timer>li {
  float: left;
  font-size: 50px;
  padding: 0px 20px;
  font-weight: bold;
}

.timer_text {
  font-size: 15px;
  text-align: center;
}

#countdown_text {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
}

#timerout {
  text-align: center;
}

<p id="countdown_text">Count down</p>
<p id="timerout">open</p>

<ul id="timer">
  <li class="clock_li"><span id="days"></span>
    <p class="timer_text">DAYS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="hours"></span>
    <p class="timer_text">HOURS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="minutes"></span>
    <p class="timer_text">MINUTES</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="seconds"></span>
    <p class="timer_text">SECONDS</p>
  </li>
</ul>

Hi guys! i want to change the text "open" to "close" when time out. so i put open

and then put "document.body.innerHTML = document.body.innerHTML.replace('open', 'close'); " in script. but it is not working...it still dsiplay "open" text any help will be so appreciated thanks! :)

Answer 1

You don't need to do a replace.

Simply change the innerHTML to 'close' like this:

document.getElementById('timerout').innerHTML = 'close';

Also place your entire else statement after your if condition that checks when the interval ends:

if (distance < 0) {
  clearInterval(x);
  document.getElementById('days').innerText = '00';
  document.getElementById('hours').innerText = '00';
  document.getElementById('minutes').innerText = '00';
  document.getElementById('seconds').innerText = '00';
  document.getElementById('timerout').innerHTML = 'close';
  return
}

Run the snippet below to see it in action, notice that I've set your time to yesterday which has already expired:

February 02, 2021 20:35:00

Change it back to your preferred date and it will work when the timer hits 0.

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('February 02, 2021 20:35:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
    if (distance < 0) {
      clearInterval(x);
      document.getElementById('days').innerText = '00';
      document.getElementById('hours').innerText = '00';
      document.getElementById('minutes').innerText = '00';
      document.getElementById('seconds').innerText = '00';
      document.getElementById('timerout').innerHTML = 'close';
      return
    }
    var hours = Math.floor((distance % (day)) / (hour));
    var days = Math.floor(distance / (day));
    var minutes = Math.floor((distance % (hour)) / (minute));
    var seconds = Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10) ? '0' + days : days,
      document.getElementById('hours').innerText = (hours < 10) ? '0' + hours : hours,
      document.getElementById('minutes').innerText = (minutes < 10) ? '0' + minutes : minutes,
      document.getElementById('seconds').innerText = (seconds < 10) ? '0' + seconds : seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
} else {
  //something
}

#timer {
  list-style-type: none;
  justify-content: center;
  display: flex;
}

#timer>li {
  float: left;
  font-size: 50px;
  padding: 0px 20px;
  font-weight: bold;
}

.timer_text {
  font-size: 15px;
  text-align: center;
}

#countdown_text {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 25px;
}

#timerout {
  text-align: center;
}

<p id="countdown_text">Count down</p>
<p id="timerout">open</p>

<ul id="timer">
  <li class="clock_li"><span id="days"></span>
    <p class="timer_text">DAYS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="hours"></span>
    <p class="timer_text">HOURS</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="minutes"></span>
    <p class="timer_text">MINUTES</p>
  </li>
  <li>:</li>
  <li class="clock_li"><span id="seconds"></span>
    <p class="timer_text">SECONDS</p>
  </li>
</ul>

Answer 2

const second = 1000,
  minute = second * 60,
  hour = minute * 60,
  day = hour * 24;

let countDown = new Date('February 03, 2021 15:54:00').getTime(),
  x = setInterval(function() {

    let now = new Date().getTime(),
      distance = countDown - now;
      if (distance < 0) { clearInterval(x); 
      document.getElementById('timer').style.opacity = '.5';
      document.body.innerHTML = document.body.innerHTML.replace('open', 'close');
      return }
    var hours =  Math.floor((distance % (day)) / (hour));
    var days =  Math.floor(distance / (day));
    var minutes =  Math.floor((distance % (hour)) / (minute));
    var seconds =  Math.floor((distance % (minute)) / second);
    document.getElementById('days').innerText = (days < 10 )?'0'+days:days,
      document.getElementById('hours').innerText = (hours < 10)?'0'+hours:hours,
      document.getElementById('minutes').innerText = (minutes < 10)?'0'+minutes:minutes,
      document.getElementById('seconds').innerText = (seconds < 10)?'0'+seconds:seconds;
  }, second)
if (second < 10 && minute < 10 && hour < 10 && day < 10) {
  countDown = "0" + countDown;
}

else {
    document.getElementById('days').innerText = '00';
    document.getElementById('hours').innerText = '00';
    document.getElementById('minutes').innerText = '00';
    document.getElementById('seconds').innerText = '00';
    
}

#timer {list-style-type:none;
        justify-content: center;
        display: flex;}

#timer > li {float:left;
             font-size:50px;
             padding:0px 20px;
             font-weight:bold;}          

.timer_text {font-size:15px;
             text-align:center;}

#countdown_text {text-align:center;
                 text-transform:uppercase;
                 font-weight:bold;
                 font-size:25px;}

#timerout {text-align:center;}

    <p id="countdown_text">Count down</p>
                <p id="timerout">open</p>
                
                <ul id="timer">
                    <li class="clock_li"><span id="days"></span><p class="timer_text">DAYS</p></li>
                    <li>:</li>
                    <li class="clock_li"><span id="hours"></span><p class="timer_text">HOURS</p></li>
                    <li>:</li>
                    <li class="clock_li"><span id="minutes"></span><p class="timer_text">MINUTES</p></li>
                    <li>:</li>
                    <li class="clock_li"><span id="seconds"></span><p class="timer_text">SECONDS</p></li>
                </ul>