custom Javascript conflicts in brooklyn

New Member
1 0 0

So i've been tasked at creating a website for a client, but we've taken on a website that has moved from squarespace to shopify(i'm quite proficient in html, css and scss and relatively newish with javascript.)


I've been modifying and adding some custom css into all pages on my brooklyn theme, and the client just has 2 points i need to address, to add a countdown timer to the event below the 'buy ticket' button on the slideshow. And to create a carousel on one HTML Block on index. So i've created the text using javascript and i placed this inside theme.js.liquid in an IFFE, immediately the code works, the writing says "Only ... days remaining" and all is good, but then i move onto other pages, and on other pages the collections are greyed out, completely, the navbar has disappeared and the site behaves very strangely.


I've tried adding this into an asset i've made called custom-timer.js and this won't pull through or work, is anybody able to show me what i've done wrong here/ what may be conflicting or where i would place this aside from inside theme.js.liquid or my own custom-timer.js ?


var dayTimer = (function(){
var para = document.createElement("h6");
var node = document.createTextNode("Only xx Days Remaining");

var element = document.querySelector(".hero__text-content");

  var countDownDate = new Date("April 23, 2020 06:00:00").getTime();

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));

    document.querySelector("h6").textContent = "Only " + days + " days remaining";

    // If the count down is finished, write some text
    if (distance < 0) {
      document.getElementById("h6").textContent = "";
  }, 1000);