Uncaught TypeError: Cannot read property 'innerHTML' of null

1

Hi. I need your help. When I inspect this code on Chrome, it keeps giving this error: Cannot read property ‘innerHTML’ of null for this line on js file:

const source = document.getElementById('ice-cream').innerHTML;

I tried several ways to keep it working, but does not seem to work.

html code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ice Scream</title>
    <script src="file.js" type="text/javascript" async></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
    <script id="ice-cream" type="text/x-handlebars-template">
      <h2>Why {{flavor}} is the best</h2>
      <p>
        It is without a doubt that {{flavor}} is the best ice cream flavor in the world. If it was left to me, I would have {{flavor}} ice cream all year round. The next time I get ice cream, I will be getting {{flavor}} because why get something else when when you can get the best.
      </p>
    </script>
  </head>
  <body>
    <div class="bg">
      <img class="bg-ice-cream" src="https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/handlebars+intro.svg">
    </div>
    <div class="container">
      <div class="text-box">
        <h2 id="title">
          iScream
        </h2>
        <div id="scream">
        </div>
      </div>
    </div>
    
  </body>
</html>

js code:

const source = document.getElementById('ice-cream').innerHTML;

const template = Handlebars.compile(source);

const context = {
  flavor: 'chocolate'
};

const compiledHtml = template(context);

const iceCreamText = document.getElementById('scream');
iceCreamText.innerHTML = compiledHtml;
3

Thanks a lot. I have changed it before the closing body tag and placed async attribute, which worked.