Templating with Handlebars not working, help!

https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/templating-with-handlebars/projects/musicon

I’ve worked this project for hours and I’ve done everything exactly as the walkthrough video instructs. The home and store pages do not show the template. I’ve triple, quadruple checked everything. I’ve written the code from the walkthrough verbatim. Where did I go wrong?

index.html

<!DOCTYPE html>
<html lang="en">
  <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>Musicon</title>
    <link href="public/style.css" rel="stylesheet">
    <script src="handlebars.min.js"></script>
    <script id="templateHB" type="text/x-handlebars-template">
      <h1>{{title}}</h1>
      <p>{{body}}</p>
      <a href="store.html">Shop Now</a>
    </script>
  </head>

  <body>
    <header>
      <section class="container">
        <h1 class="branding">Musicon</h1>

        <nav>
          <ul class="navbar">
            <li class="current">
              <a href="index.html">Home</a>
            </li>
            <li class="navbar">
              <a href="store.html">Store</a>
            </li>
            <li class="navbar">
              <a href="contact.html">Contact</a>
            </li>
          </ul>
        </nav>

      </section>
    </header>

    <article id="introduction">
      <section id="information" class="container">
        
      </section>
    </article>

    <footer>
      <p>&copy; Musicon</p>
    </footer>
    <script src="public/main.js"></script>
  </body>
</html>

store.html

<!DOCTYPE html>
<html lang="en">
  <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>Musicon</title>
    <link href="public/style.css" rel="stylesheet">
    <script src="handlebars.min.js"></script>
    <script id="templateHB" type="text/x-handlebars-template">
        {{#each instruments}}
        <article class="instrument">
          <img class="image" src={{this.image}} alt={{this.name}}>
          <section class="details">
            <h2 class="name">{{this.name}}</h2>
            <p class="description">{{this.description}}</p>
            {{#if sale}}
            <p class="price"><del>{{this.price}}</del></p>
            <p class="sale">{{this.sale}}</p>
            {{else}}
            <p class="price"><del>{{this.price}}</del></p>
            {{/if}}
          </section>
        </article>
    </script>
  </head>

  <body>
    <header>
      <section class="container">
        <h1 class="branding">Musicon</h1>

        <nav>
          <ul class="navbar">
            <li>
              <a href="index.html">Home</a>
            </li>
            <li class="current">
              <a href="store.html">Store</a>
            </li>
            <li class="navbar">
              <a href="contact.html">Contact</a>
            </li>
          </ul>        
        </nav>
      </section>
    </header>

    <article id="showcase">
      <section id="information" class="container">

      </section>
    </article>

    <footer>
      <p>&copy; Musicon 2018</p>
    </footer>

    <script src="public/main.js"></script>
  </body>
</html>

main.js

const templateElement = document.getElementById(“templateHB”);

let templateSource = templateElement.innerHTML;

let template = Handlebars.compile(templateSource);

let compiledHtml = template(context);

document.getElementById(‘information’).innerHTML = compiledHtml;

This is happening to me as well.

I wonder what is going wrong.

You forgot to add {{/each}} in store.html.

Would you be able to have a look at mine as well? Thank you :slightly_smiling_face:

Hey I appreciate you taking a look at my code. I made the correction and added {{/each}} to the section, but I’m still not getting anything to show up on my home or store page. I’m really stumped on what it could be.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.