Thread: connecting my js file to html, cannot find a mistake

part of js file:

Code:

var animals_data = {
    category : [
        {
            name : "Reptiles",
            thumbnail: src: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Coast_Garter_Snake.jpg/500px-Coast_Garter_Snake.jpg",
            animals : [
                {
                    image1 : src: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Coast_Garter_Snake.jpg/500px-Coast_Garter_Snake.jpg",
                    image2 : src: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Nerodia_sipedon_shedding.JPG/440px-Nerodia_sipedon_shedding.JPG",
                    
                    name : "Snake",
                    description : "Snakes are elongated, legless, carnivorous reptiles of the suborder Serpentes that can be distinguished from legless lizards by their lack of eyelids and external ears. Like all squamates, snakes are ectothermic, amniote vertebrates covered in overlapping scales. Many species of snakes have skulls with several more joints than their lizard ancestors, enabling them to swallow prey much larger than their heads with their highly mobile jaws. To accommodate their narrow bodies, snakes' paired organs (such as kidneys) appear one in front of the other instead of side by side, and most have only one functional lung. Some species retain a pelvic girdle with a pair of vestigial claws on either side of the cloaca. Living snakes are found on every continent except Antarctica, and on most smaller land masses — exceptions include some large islands, such as Ireland and New Zealand, and many small islands of the Atlantic and central Pacific.[3] Additionally, sea snakes are widespread throughout the Indian and Pacific Oceans. More than 20 families are currently recognized, comprising about 500 genera and about 3,400 species.[4][5] They range in size from the tiny, 10 cm-long thread snake to the reticulated python of up to 6.95 meters (22.8 ft) in length.[6] The fossil species Titanoboa cerrejonensis was 13 meters (43 ft) long.[7] Snakes are thought to have evolved from either burrowing or aquatic lizards, perhaps during the Jurassic period, with the earliest known fossils dating to between 143 and 167 Ma ago.[8] The diversity of modern snakes appeared during the Paleocene period (c 66 to 56 Ma ago). The oldest preserved descriptions of snakes can be found in the Brooklyn Papyrus. Most species are nonvenomous and those that have venom use it primarily to kill and subdue prey rather than for self-defense. Some possess venom potent enough to cause painful injury or death to humans. Nonvenomous snakes either swallow prey alive or kill by constriction."
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Crocodilia_collage.jpg/600px-Crocodilia_collage.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Caiman_crocodilus_Tropicario_2.JPG/440px-Caiman_crocodilus_Tropicario_2.JPG",
                    name : "Crocodilia",
                    description : "The Crocodilia (or Crocodylia) are an order of large, predatory, semiaquatic reptiles. They appeared 83.5 million years ago in the Late Cretaceous period (Campanian stage) and are the closest living relatives of birds, as the two groups are the only known survivors of the Archosauria. Members of the crocodilian total group, the clade Pseudosuchia, appeared about 250 million years ago in the Early Triassic period, and diversified during the Mesozoic era. The order Crocodilia includes the true crocodiles (family Crocodylidae), the alligators and caimans (family Alligatoridae), and the gharial and false gharial (family Gavialidae). Although the term 'crocodiles' is sometimes used to refer to all of these, a less ambiguous vernacular term for this group is crocodilians."
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/500px-Bartagame_fcm.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Lizard_in_Yemen.JPG/440px-Lizard_in_Yemen.JPG",
                    name : "Lizard",
                    description : "Lizards are a widespread group of squamate reptiles, with approximately over 6,000 species,[1] ranging across all continents except Antarctica, as well as most oceanic island chains. The group, traditionally recognized as the suborder Lacertilia, is defined as all extant members of the Lepidosauria (reptiles with overlapping scales) that are neither sphenodonts (i.e., tuatara) nor snakes – they form an evolutionary grade.[2] While the snakes are recognized as falling phylogenetically within the Toxicofera clade from which they evolved, the sphenodonts are the sister group to the squamates, the larger monophyletic group, which includes both the lizards and the snakes."
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Chelonia_mydas_is_going_for_the_air.jpg/440px-Chelonia_mydas_is_going_for_the_air.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Turtle3m.JPG/500px-Turtle3m.JPG",
                    name : "Turtle",
                    description : "Turtles are reptiles of the order Testudines (or Chelonii[3]) characterised by a special bony or cartilaginous shell developed from their ribs and acting as a shield.[4] \"Turtle\" may refer to the order as a whole (American English) or to fresh-water and sea-dwelling testudines (British English). The order Testudines includes both extant (living) and extinct species. The earliest known members of this group date from 157 million years ago,[1] making turtles one of the oldest reptile groups and a more ancient group than snakes or crocodilians. Of the 327 known species alive today, some are highly endangered."
                },
            ]
        },
        {
            name : "Mammals",
            animals : [
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/440px-AfricanWildCat.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/440px-Kittyply_edit1.jpg",
                    name : "Cat",
                    description : "The domestic cat (Felis catus or Felis silvestris catus) is a small, usually furry, domesticated, and carnivorous mammal. They are often called housecats when kept as an indoor pet or simply cats when there is no need to distinguish them from other felids and felines.[6] Cats are often valued by humans for companionship and their ability to hunt vermin."
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/340px-Poligraf_Poligrafovich.JPG",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Cavalier_King_Charles_Spaniel_trio.jpg/440px-Cavalier_King_Charles_Spaniel_trio.jpg",
                    name : "Dog",
                    description : "The domestic dog (Canis lupus familiaris or Canis familiaris) is a domesticated canid which has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes. Although initially thought to have originated as a manmade variant of an extant canid species (variously supposed as being the dhole, golden jackal, or gray wolf), extensive genetic studies undertaken during the 2010s indicate that dogs diverged from other wolf-like canids in Eurasia 40,000 years ago. Being the oldest domesticated animals, their long association with people has allowed dogs to be uniquely attuned to human behavior, as well as thrive on a starch-rich diet which would be inadequate for other canid species."
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Diademed_ready_to_push_off.jpg/440px-Diademed_ready_to_push_off.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Three_chimpanzees_with_apple.jpg/640px-Three_chimpanzees_with_apple.jpg",
                    name : "Primate",
                    description : "A primate is a mammal of the order Primates (Listeni/praɪˈmeɪtiːz/ pry-may-teez; Latin: \"prime, first rank\"). In taxonomy, primates include two distinct lineages, strepsirrhines and haplorhines. Primates arose from ancestors that lived in the trees of tropical forests; many primate characteristics represent adaptations to life in this challenging three-dimensional environment. Most primate species remain at least partly arboreal. With the exception of humans, who inhabit every continent, most primates live in tropical or subtropical regions of the Americas, Africa and Asia.[4] They range in size from Madame Berthe's mouse lemur, which weighs only 30 g (1 oz), to the eastern lowland gorilla, weighing over 200 kg (440 lb). Based on fossil evidence, the earliest known true primates, represented by the genus Teilhardina, date to 55.8 million years old.[5] An early close primate relative known from abundant remains is the Late Paleocene Plesiadapis, circa 55–58 million years old.[6] Molecular clock studies suggest that the primate branch may be even older, originating near the Cretaceous–Paleogene boundary or around 63-74 mya"
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/%D0%9C%D1%8B%D1%88%D1%8C_2.jpg/500px-%D0%9C%D1%8B%D1%88%D1%8C_2.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Fancy_mice.jpg/500px-Fancy_mice.jpg",
                    name : "Mouse",
                    description : "A mouse (plural: mice) is a small rodent characteristically having a pointed snout, small rounded ears, a body-length scaly tail and a high breeding rate. The best known mouse species is the common house mouse (Mus musculus). It is also a popular pet. In some places, certain kinds of field mice are locally common. They are known to invade homes for food and shelter."
                },
            ]
        },

part of html file:

Code:

<!DOCTYPE html>
<!-- This is a first example of using a template -->

<html lang="en">
<head>

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animals</title>

<!-- include our libraries and css files -->

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/handlebars-v3.0.3.js"></script>

<script src="js/bootstrap.min.js"></script>
<script src="js/AnimalsData.js"></script>
<script src="js/assignment.js"></script>

<link href="css/bootstrap.css" rel="stylesheet">
<link href="assignment.css" rel="stylesheet">

</head>

<body>

    <!-- put your HTML here -->
    <div class="container">

      <!-- page tile -->
      <div class="page-header">
        <h1>Animals</h1>
      </div>    

      <ul class="nav nav-tabs">
           
            <li role=""><a href="#" id="reptiles-tab" >Reptiles</a></li>
            <li role=""><a href="#" id="mammals-tab" >Mammals</a></li>
            <li role=""><a href="#" id="birds-tab" >Birds</a></li>
          </ul>
      <br/><br/>


      <!-- the content section is empty as we will fill it 
            via javascript and templates -->
      <div id="content"  class="container-fluid"  role="main">
      </div>
  </div> <!-- / container -->

<!-- Here are our Templates -->


<!-- this is the template for the albums view -->
<!-- 
    it displays the albums in a bootstrap grid format
    with one item for each album (using the {{#each}} template expression. 
    Each album is displayed with a thumbnail image, a name and 
    the number of photos (using the {{photos.length}} template expression, see my lecture for more details)
-->
<script id="category-template" type="text/x-handlebars-template">
  <div class="row">

    {{#each category}}
    <div class="col-xs-12 col-md-3"> 
        <div class="reptiles-thumbnail"  data-id="{{@index}}">
          <img class="crop-img" src="{{thumbnail}}" alt=""/> 
            
          <div class="caption">
              <h4> {{name}} </h4>
              <p>{{images.length}} animals</p>
          </div>
         </div>
    </div> <!-- / col -->

{{/each}}

</div> <!-- / row -->
</script>
    
  <script id="category-template" type="text/x-handlebars-template">
  <div class="row">

    {{#each category}}
    <div class="col-xs-12 col-md-3"> 
        <div class="mammals-thumbnail"  data-id="{{@index}}">
          <img class="crop-img" src="{{thumbnail}}" alt=""/> 
            
          <div class="caption">
              <h4> {{name}} </h4>
              <p>{{images.length}} animals</p>
          </div>
         </div>
    </div> <!-- / col -->

{{/each}}

Your example HTML section -- is that all one file, if so your problem could be that you're trying to use the same ID more than once. ID's are unique, so you can only use them ONCE on a page... Your two handlebars sections need UNIQUE ID's.

Also being handlebars, do you do the handlebars.compile and compile_template thing with the innerHTML asshattery (one reason handlebars/mustache/etc shouldn't be used from an efficiency standpoint) for EACH of those sections on the page? Not seeing where you handle that either.

Really though, all in all it's a great argument for why this type of processing should be handled SERVER-SIDE, not client-side... well, along with that whole "what content?" SEO thing and "what content?" accessibility thing that is part of why JavaScript should NEVER be the only mechanism on a page for delivering content -- well unless you're big enough or successful enough (facebook, twitter, disqus) to tell large swaths of potential users to go plow themselves.