title: What is the proper way to fire two scripts: one that loads data and another that manipulates styling?
body: <p>I'm running a website that dynamically loads a new headline at refresh using JavaScript. I should mention, my site is extremely tiny so I'm purposefully avoiding using jQuery or any other JS libraries.</p>
  <p>First script loads a JSON file and randomly selects an entry into the HTML. Second script &quot;attempts&quot; to check if the document's length runs past the viewport, if it does, shrink the text and check again.</p>
  <pre><code>ajax.request(&quot;GET&quot;,&quot;file.json&quot;); // works fine
  preventScroll.resize(&quot;.headline&quot;); // not so much
  </code></pre>
  <p>However, I can't get the second script to work reliably. I've tried loading both through <code>window.onload</code>, I've tried moving it from the HEAD tag to immediately before the end of the BODY tag.</p>
  <p><a href="https://gist.github.com/reneruiz/0fba9f66049c5c8e51b4" rel="nofollow noreferrer">Scripts in question</a></p>
  <p><a href="http://dev.thingscicadasmissed.com/" rel="nofollow noreferrer">Live Example</a></p>
  <p>How should I properly call these so they always work?</p>