Musicon - instrument template not displaying

Hi

Everything was going well on the project until section 40. When I deleted the HTML hard code for the instruments on the ‘stores’ page, the handlebars templates won’t appear (they work on the ‘home’ page). I have check everything a hundred times, matched the walk-along youtube video but can’t seem to find the error.
Could somebody please help spot it? It’s driving me crazy! lol

HTML code within the <head> with the template:

<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>Price: {{this.price}}</del></p>
            <p class="sale">On Sale! {{this.sale}}</p>
            {{else}}
             <p class="price">Price: {{this.price}}</p>
            {{#/if}}
          </section>
        </article>
        {{/each}}
    </script>

Section of HMTL on the same page in the <body> that should be displaying the template:

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

The Javascript with the template values:

const context = {
  title: 'Welcome to Musicon',
  body: 'Musicon is a budding musical storefront with a mission to share the joy of music. These magnificent auditory tools are designed with musical creators, like you, in mind. Hobbyists, beginners, and experts alike can appreciate the resplendent sounds supplied by each and every instrument we carry. Join us in delivering the euphoric vibrations of melodia to the citizens of the world!',
  instruments: [
    {
      image: 'https://content.codecademy.com/courses/learn-handlebars/musicon/electronic-keyboard.png',
      name: 'Electronic Keyboard',
      description: 'A piano welcomed to the 21th century. Pianists celebrate the compact form factor and the diversity of synthesized rhythms all in one masterful musical machine.',
      price: '$1,999.00',
      sale: '$1,699.89'
    },
    {
      image: 'https://content.codecademy.com/courses/learn-handlebars/musicon/electric-guitar.png',
      name: 'Electric Guitar',
      description: 'Join the legends of the \'50s and \'60s when the marriage of guitar and electricity created the most influential instrument of a generation. Note: picks sold separately.',
      price: '$599.99'
    },
    {
      image: 'https://content.codecademy.com/courses/learn-handlebars/musicon/bass-guitar.png',
      name: 'Bass Guitar',
      description: 'Experience the embodiment of funkadelic frequencies that is the bass guitar. Let the deep low notes of the bass guitar resonate with heartbeats everywhere.',
      price: '$624.99'
    },
    {
      image: 'https://content.codecademy.com/courses/learn-handlebars/musicon/drum-kit.png',
      name: 'Drum Kit',
      description: 'Ever thought, "one instrument isn\'t enough?" Find an answer in the drum kit. Coordinate a collections of drums and cymbals to dictate the rhythm of musical masterpiece.',
      price: '$649.00',
      sale: '$349.00'
    }
  ]
};

const templateElement = document.getElementById("templateHB");
const templateSource = templateElement.innerHTML;
const template = Handlebars.compile(templateSource);
const compiledHtml = template(context);
document.getElementById('information').innerHTML = compiledHtml;
1 Like

Hi there.

Whenever you’re working with JavaScript, the browser console is your best friend. Handlebars as a library throws errors, like this one which I imagine you’re getting:

Uncaught Error: Parse error on line 13:
...</p>            {{#/if}}          </se
----------------------^
Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'SEP'
    at a.parseError (handlebars.min.js:28)
    at a.parse (handlebars.min.js:28)
    at d [as parse] (handlebars.min.js:27)
    at d (handlebars.min.js:28)
    at e (handlebars.min.js:28)
    at main.js:46

This should make the issue pretty obvious, no? :slight_smile: (Note that line numbers will be different, as I broke my version of the code to recreate your error. :slight_smile: )

1 Like

Yes that solved it! Thank you.
Can we use the console in codecademy projects like this when using the built in editor?

1 Like

No problem. :slight_smile:

Yes, in fact I’d encourage you to do so - it’ll certainly help with debugging, both with the Codecademy material but also any projects of your own as you gain confidence. :slight_smile: