Q:

How to read object properly in JavaScript

I am new to programming and recently began learning Javascript, I have a problem that appeared in few exercises that I made. I searched the site for more information but have not found a solution for my problem. I apologize in advance for my bad english and if this is not the right place or the right way to ask this question because this is my first post in Stackoverflow.
Currently practicing HTML templates. Assuming that the code is correct, I'm not sure where I'm wrong. Loading code into the browser and Handlebars gives me an error: "Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined". I tried to debug and saw that when I tried to take a value from date object it gives back undefined. In previous exercise had a similar problem in which I tried to read JSON object and did not manage to parse it and returned again undefined. Can you help me, I am stuck on this problem for some time.

var data = {
  animals: [{
    name: 'Lion',
    url: 'https://susanmcmovies.files.wordpress.com/2014/12/the-lion-king-wallpaper-the-lion-king-2-simbas-pride-4685023-1024-768.jpg'
  }, {
    name: 'Turtle',
    url: 'http://www.enkivillage.com/s/upload/images/a231e4349b9e3f28c740d802d4565eaf.jpg'
  }, {
    name: 'Dog'
  }, {
    name: 'Cat',
    url: 'http://i.imgur.com/Ruuef.jpg'
  }, {
    name: 'Dog Again'
  }]
}

window.onload = function() {
  var htmlTemplate = document.getElementsByClassName('container-template').innerHTML;
  var template = Handlebars.compile(htmlTemplate);

  for (let x of data.animals) {
    if (x.hasOwnProperty('url')) { //x.url
      x.hasUrl = true;
    } else {
      x.hasUrl = false;
    }
  }

  document.getElementsByClassName('container').innerHTML = template(data);
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Animals & Batman</title>
</head>

<body>

  <div class="container">
  </div>

  <script class="container-template" type="text/x-handlebars-template">
    <h1>Animals</h1>
    {{#each animals}} 
      {{#if hasUrl}}
          <li>
              <a href="{{url}}">See a {{name}}</a>
          </li>
      {{else}}
          <li>
              <a href="http://cdn.playbuzz.com/cdn/3170bee8-985c-47bc-bbb5-2bcb41e85fe9/d8aa4750-deef-44ac-83a1-f2b5e6ee029a.jpg">No link for {{name}}, here is Batman!</a>
          </li>
      {{/if}} 
    {{/each}}
  </script>

  <script src="../handlebars-v4.0.5.js" charset="utf-8"></script>
  <script src="../jquery-3.1.0.js" charset="utf-8"></script>
  <script src="./main.js" charset="utf-8"></script>
</body>

</html>

A:

document.getElementsByClassName returns an array of elements, not a single one - since multiple elements on a page can have the same class.
What you probably want is to use the id instead of class:
<script id="container-template" type="text/x-handlebars-template">

var htmlTemplate = document.getElementById('container-template').innerHTML;

