Musicon Store.html file not displaying after adding in a handlebar

Hello, I have used the handlebars and I have had no issue displaying the HTML after deleting the hardcoded HTML. However when I applied the handlebars for the store.html page, none of the html elements pop up and i have looked into forums and watched the walkthrough with no luck as to what could be the reason for this error.

I will paste down my code below.

Index.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>
               <a href="store.html">store</a>
            </li>
             <li>
               <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>
      <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>
  </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>
               <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 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'
    },
    {
      image:'https://content.codecademy.com/courses/learn-handlebars/musicon/violin.png',name:'Violin', description:'A versatile that is suited for any and all occasions. Those wearing tuxedos can strum together a classic. Others who prefer overalls can call it a fiddle and play some folk songs.',
      price:'$245.00'
    }
  ]
};

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


Thank you for taking your time to help me!

Hello, and welcome to the forums!

You have an {{else}} and {{/if}}, but not the {{#if}} to begin it, so Iā€™m thinking handlebars had an error and ended up not displaying anything. From what I can tell, the rest of your code looks good, though

You are an absolute champ. You deserve every good thing coming to you. I was on the brink of just moving on with this project as it is currently 3:16AM and it was a simple mistake as that. Thank you so much man!

In case anyone is curious, here is the new line that works for store.html

1 Like