-2

I have been struggling with widgets which require some HTML and a bit of JS which has to be put before the tag. One example: HTML:

<div class="cc_player" data-username="ckhnsbvf">Loading ...</div>

JS:

<script language="javascript" type="text/javascript" src="http://solid33.streamupsolutions.com:2199/system/player.js"></script>

As I mentioned, the JS has to go before the tag. However, all similar widgets fail, could it have something to do with the fact that, at the moment, the following code exists before the tag and it clashes with the added JS?

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

That's all I can think of. If anyone can help, it would be much appreciated. Kind regards. Someone asked me to include the js file, that's it:

http://solid33.streamupsolutions.com:2199/system/player.js

He also asked for a "simplified HTML file, I'm not sure what that would be, I'm only a beginner.

mrfdes
  • 1
  • 4
  • good practice to put JS in the bottom of page. refer https://stackoverflow.com/questions/196702/where-to-place-javascript-in-an-html-file – Devsi Odedra Dec 12 '19 at 05:45
  • Put inside `` tag at the end just before '` and see if that works. Placing script tag just to be sure that it should execute first doesn't make sense in html. It should work like i said. Because that's how the browser downloads the components of your site! – Akif Hussain Dec 12 '19 at 05:45
  • Sorry, I made a mistake here. I obviously meant "Before the

    tag", not

    .     – mrfdes Dec 12 '19 at 05:49
  • Could you include your JS file, and a simplified version of HTML structure? Currently, it's hard to tell, what the problem is... – FZs Dec 12 '19 at 06:04

1 Answers1

0

If you're attempting to access the DOM through a javascript file imported through a script above the , you should wait for the DOM content to load. You can do this with vanilla javascript by listening on the window for the DOMContentLoaded event, like this:

const init = async () => {
  // Everything
}
document.addEventListener("DOMContentLoaded", init);

The DOMContentLoaded event is supported by all major browser. See: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

However, if you're into jQuery, you can do the same thing like this: 

const init = async () => {
  // Everything
}
$( document ).ready(init)

https://learn.jquery.com/using-jquery-core/document-ready/

Jacob Penney
  • 664
  • 4
  • 9