Help single page script

[Mpire]

Hi, i'm trying to add a script to my checkout page only but can't make it work, the time doesn't appear and also don't know if the script is running

Here's what I did:
1) Added to the page as text:

<div>Registration closes in <span id="timedown"></span> minutes!</div>
Registration closes in <span id="timedown"></span> minutes!

2) Created a checkout-countdown.js in /wp-content/themes/mytheme/assets/js and inside pasted this script:

window.onload = function () {
    var display1 = document.querySelector('#timedown'),
        timer1 = new CountDownTimer(600);

    timer1.onTick(format(display1)).start();

    function format(display) {
        return function (minutes, seconds) {
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            display.textContent = minutes + ':' + seconds;
        };
    }
};

3) Added this code to my child functions.php

function add_countdown() {
    if ( is_page(7) ) {           
        wp_enqueue_script( 'checkout-countdown', get_stylesheet_directory_uri() . '/js/checkout-countdown.js', array('jquery'));
}   
}
add_action( 'wp_enqueue_scripts', 'add_countdown' );

* 7 is the ID of my checkout page

What's the issue? Let me know Thanks!

 

[CCarter]

You have two IDs which are using the same name

id="timedown"

. That's not allowed in javascript. You can use classes multiple times but not IDs. I'm not sure if that's the problem with your code though. You are asking to call the #timedown ID when doing the var display1 so potentially that's one of your problems.

 

[Rageix]

@CCarter it is bad practice to have the same id multiple times on a page, but it will simply grab the first instance of that id. The other will simply be ignored.

@Mpire the real problem with your code is on line 3 of the javascript:

timer1 = new CountDownTimer(600)

There is no function CountDownTimer() to be called, and thus will throw an Uncaught ReferenceError and do nothing.

 

[Ryuzaki]

@Mpire, I went back to your original question in the other thread and you're completely missing an external resource that they didn't make obvious in that JSFiddle. It's...

countdowntimer.js

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);
   
    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

That should fix you up.