title: is not defined at onload
body: <p>I know this is an issue who comes again and again, but I can't find any clear solution.</p>
  
  <p>I had a static html/js which were working fine (because it was only html and js, the scripts had the time to load and stuff like body onload were working).</p>
  
  <p>But now I try to export this same page under a Symfony application</p>
  
  <p>So as, in my twig I have this</p>
  
  <pre><code>&lt;head&gt;
      {% block stylesheets %}
          &lt;link href="{{ asset('build/synopsis.css') }}" rel="stylesheet" /&gt;
      {% endblock %}
      {% block scripts %}
          &lt;script type="text/javascript" src="{{ asset('build/synopsis.js') }}"&gt;&lt;/script&gt;
      {% endblock %}
  &lt;/head&gt;
  
  &lt;body onload="drawStars()"&gt;
  </code></pre>
  
  <p>But now obviously, the drawStars function isn't loaded fast enough to make it work (or I think this is what happen).</p>
  
  <p>And i'm getting </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: drawStars is not defined
        at onload</p>
  </blockquote>
  
  <p>I'm looking for a way to prevent my all body to be generated before the script isn't fully loaded.</p>
  
  <p>PS: I know it's bad to load script in header because slowing things, but there are some specific case when you want your script to be first fully loaded. Already tried to look with <code>async</code> or <code>defer</code> but without success.
  Thanks for your help.</p>
  
  <p>EDIT: Here is my synopsis.js file</p>
  
  <pre><code>require('../css/synopsis.css');
  
  // Sets the number of stars we wish to display
  const numStars = 100;
  
  function drawStars() {
    // For every star we want to display
  for (let i = 0; i &lt; numStars; i++) {
    let star = document.createElement("div");  
    star.className = "star";
    var xy = getRandomPosition();
    star.style.top = xy[0] + 'px';
    star.style.left = xy[1] + 'px';
    document.body.append(star);
  }
  }
  
  
  // Gets random x, y values based on the size of the container
  function getRandomPosition() {  
    var y = window.innerWidth;
    var x = window.innerHeight;
    var randomX = Math.floor(Math.random()*x);
    var randomY = Math.floor(Math.random()*y);
    return [randomX,randomY];
  }
  
   var audio=document.createElement('audio');
   var play=true;
  
  
  function turn(){
    if(play){
        document.getElementsByClassName('soundOn')[0].innerHTML = "Musique Off";
        document.getElementsByClassName('soundOn')[0].style.backgroundColor="red";
        audio.src="musique/opening.mp3";
        audio.play();
      }else{
        document.getElementsByClassName('soundOn')[0].innerHTML = "Musique On";
        document.getElementsByClassName('soundOn')[0].style.backgroundColor="#4CAF50";
        audio.pause();
      }
      play = !play;
  
  }
  </code></pre>