My Javascript File use another automatically, why?

Question

i have the green-audio-player script and slick script. My green-audio-player doesn't work. If i delete my slick script, its work fine.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script src="js/audioPlayer/audioPlayer.js" type="text/javascript"></script>
</body>
</html>

if i use the audioPlayer in my index.html

<div class="player">
 <audio crossorigin>
  <source src="mp3/sample.mp3" type="audio/mpeg"></audio>
</div>

But i have a Problem after that. If i check the code in Google-Browser-Inspector it seems automatically change the audio-player with slick-properties of slick.js File

<div class="volume__slider slider slick-initialized slick-slider slick- 
 dotted" data-direction="vertical" tabindex="0">
                    <div class="slick-list draggable"></div></div>

Can everyone explain me this magic?

Answer 1

Probably because JQuery is not loaded.

Be sure to add the JS file in html before your own script and to wait for it to be ready.

$( document ).ready(function() {
   $('html').addClass(isPoorBrowser ? 'poor-browser' : 'no-poor-browser');
});

doc