Javascript 查询选择器问题在 While 循环内

Question

I am trying to attach a countdown script to looped, dynamic divs. The countdown shows outside of the loop without issue, but console log shows queryselector is null inside the loop. If anyone can help it would be appreciated

var expiration = data[i]['expiration'];

function getTimeRemaining(expiration) {
  var t = Date.parse(expiration) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, expiration) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelectorAll('.days');
  var hoursSpan = clock.querySelectorAll('.hours');
  var minutesSpan = clock.querySelectorAll('.minutes');
  var secondsSpan = clock.querySelectorAll('.seconds');

  function updateClock() {
    var t = getTimeRemaining(expiration);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = t.hours;
    secondsSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

initializeClock('clockdiv', expiration);


if (email == "") {

  if (promoType == "Banner") {
    $('#load-container-expiring').append('<div class="row-center-center padding-top-5 padding-bottom-2"><div>' + promoNameExpiringButton + '</div></div>');
    $('#load-container-expiring').append('<div><div class="wrap-content"><img class="mobile-banner-scale" id="visitor-banner-click" src=' + theBanner + '></div></div>');
    -- >>> Issue Here-- - > $('#load-container-expiring').append('<div id="clockdiv"><span class="days"></span> Days <span class="hours"></span> Hours <span class="minutes"></span> Minutes <span class="seconds"></span> Seconds</div>');
  }

Answer 1

At the moment you call initializeClock('clockdiv', expiration) , the div with id "clockdiv" does not exist yet. And so clock will be undefined, and clock.querySelectorAll(...) will generate an exception.

Move that initializeClock('clockdiv', expiration) below the code that adds that "clockdiv" element to the DOM.

Also fix the first secondsSpan.innerHTML = to be minutesSpan.innerHTML =