Javascript works on other site, but not on Bubble

[benlindsey19]

Hello,

This is my first time posting. I’ve been trying for three days to try to get a simple javascript to work on Bubble, but can’t seem to make it stick. However, it works perfectly fine on my test site linked here.
Working test

For this to work, it needs a css and javascript in the head section, which I’ve added to the page’s attributes.

It also needs three scripts in the body, which I’ve set in an HTML element with the condition to make the element visible once everything has been loaded.

It interacts with a native video container (HTML element) and an element that contains the transcript (another HTML element, as it needs to have specific styling).

I can get it working just fine on my test site, but not in Bubble. Can’t figure out what I’m missing, but I’ve been trying for three days. Any insight would be greatly appreciated.

Bubble Editor - Lingualab MVP

Here’s a link to the original github post.

GitHub - hyperaudio/hyperaudio-lite: Hyperaudio Lite - a Super-lightweight...

[mishav]

The “three scripts” HTML element is being rendered too early, i.e. before the other HTML element has been rendered. This is because your conditional is all about Bubble conditions and not about whether the browser has done its thing with the (unknown to the browser) dependency.

One workaround is to poll for existence of the two ids, thus allowing any rendering order …

var minimizedMode = false;
var autoScroll = true;
var doubleClick = false;

var iii = setInterval(() => {
  if (document.getElementById("hypertranscript") && document.getElementById("hyperplayer")) {
    clearInterval(iii);
    new HyperaudioLite("hypertranscript", "hyperplayer", minimizedMode, autoScroll, doubleClick);
  }
},200);

I changed the let to var in case it gets rendered more than once. If that’s not going to happen, let is fine.

[benlindsey19]

@mishav You’re a saint! I can’t thank you enough. It works exactly as expected now.