Script failing to run in Hubspot 'Drop & drag' builder
Hello everyone!
I'm hoping you can help me resolve a script related issue (I'm not super experienced with Javascript).
I have included a custom script in the header on my code to re-run the .gifs when a user hits the Bootstrap tabs (see code below):
// Function resets gif through id
function resetGif(id) { var img = document.getElementById(id); var imageUrl = img.src; img.src=""; img.src=imageUrl; }
function handleTabSelection(tabId) { // Depending on the tab being clicked do different stuff switch (tabId) { case '#lA': doSomethingElse() break; case '#lB': resetGif('gif02') break; case '#lC': resetGif('gif01') break; case '#lD': doSomeAnimation() break; default:
} }
function attachTabShownEventHandler() { const tabSelector = '.nav-tabs li div[data-toggle="tab"'; const eventType = 'shown.bs.tab'; const tabIdAttribute = 'data-target'; $(tabSelector).on(eventType, function(event){ const id = event.target.getAttribute(tabIdAttribute); handleTabSelection(id); }); }
/// When the document is loaded then attach an event handler that listens to all the shown events on the tabs $(document).ready(function(){ attachTabShownEventHandler(); });
For some unknown reason the script runs correctly when I setup the template file as 'HTML&HUBL' (with the Hubspot footer removed) but not when I place it within the 'Drag & drop' builder template. The script only ran in the 'HTML&HUBL' template once I removed the footer. So I suspect this could be causing some issue.