Help with handlebars

Hi! I have a personal website (bdesign.tech) which I built thanks to what I learned through Codecademy! I’m now trying to take it to the next step. I made the course “Building Interactive JavaScript Websites” and I believe the best way to really fortify what I’ve learned is by putting it in practice.
My website kinda follows the UX of a blog but I have each article hardcoded on the index.html. I’m trying to change it to use handlebars, but it’s not working at all. I’m really not sure what I’m missing, it’s probably an obvious thing but I’ve re-wrote the code a couple times with diferent “strategies” and it still fails. The error on the console log of the browser is always the same: Uncaught TypeError: Cannot read properties of null (reading ‘innerHTML’).

Edit: the index page renders only the header and footer but not the articles.

Here’s my (index.html):

<!DOCTYPE HTML> <html> <head> <title>b - Main Page</title> <link rel="stylesheet" href="/Source_app.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="/articles/array_articles.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script id='article_cards' type="text/x-handlebars-template"> {{#each articles}} <article> <a class='title' href={{this.webPage}}><h2 class='title'>{{this.title}}</h2></a> <a href={{this.webPage}}><img src={{this.thumbnail}}></a> <div class="tags"> {{#if this.video}} <p class="tag_video">Video</p> {{/if}} {{#if this.text}} <p class="tag_text">Text</p> {{/if}} </div> <p class='resume'>{{this.resume}}</p> <div class='read_more'> <a class='read_more' href="{{this.webPage}}">Open</a> </div> </article> <hr class="art_div"> {{/each}} </script> </head> <body> <header> <a href="/index.html"><img class='top_logo' src=./B_1.png></a> </header> <hr class='top_logo'> <section id='posts'> <!-- Example of hardcoded article <article> <a class='title' href="iPhone_13/iPhone_13.html"><h2 class='title'>iPhone 13</h2></a> <a href="iPhone_13/iPhone_13.html"><img src=./iPhone_13/Thumbnail_v4.png></a> <div class="tags"> <p class="tag_video">Video</p><p class="tag_text">Text</p> </div> <p class='resume'>An iPhone with 100% screen-to-body ratio, variable optical zoom and more.</p> <div class='read_more'> <a class='read_more' href="./iPhone_13/iPhone_13.html">Open</a> </div> </article> --> </section> <footer> <p class='made_by'><span class='b_in_text'>b</span> is a platform created by Philippe Nunes</p> <p class='social_media_footer'><a href="https://www.youtube.com/channel/UCCSbCOEB_ZxwnQ-Xasqkj-Q"><img src="/yt_icon_mono_dark.png"></a></p> <a class="about_me_a" href="/about.html"><p>About <span class='b_in_text'>b</span></p></a> </footer> </body> </html>

and my js (array_articles.js):

let a_articles = { articles : [ { title: `iPhone 13`, resume: `An iPhone with 100% screen-to-body ratio, variable optical zoom and more.`, thumbnail: "/articles/thumbnails/Thumbnail_iPhone_13.png", webPage: "./articles/iPhone_13.html", video: true, text: true, }, { title: `iMac Pro (2021)`, resume: `A look at an iMac Pro with the design language of the iMac 24" M1`, thumbnail: "./articles/thumbnails/Thumbnail_iMac_Pro_2021.png", webPage: "./articles/iMac_Pro_2021.html", video: true, text: false, }, { title: `Portable XBOX `, resume: `A look at what a portable Xbox could look like. Brings together the best of running games on-device plus the capabilites of xCloud`, thumbnail: "./articles/thumbnails/Thumbnail_xbox_portable.png", webPage: "./articles/Portable_Xbox.html", video: true, text: false, } ] } const templateElement = document.getElementById("article_cards"); const templateSource = templateElement.innerHTML; const compiledHtml = template(context); document.getElementById('posts').innerHTML = compiledHtml;

Thank you for your time! Have a good day. :slight_smile:

You want want to put the defer attribute for some of the script tags so that they load after the rest of the page.

Check the order of the script tags too.
If you use Handlbars in the other script, you may need to put the script that loads Handlebars first (if both have defer or both don’t have defer).

1 Like

Yes, the order of rendering the code was messing it up! Thanks.

Also, for anyone else who might find this topic having a similar problem but this solution doesnt work: On my js, line 61 I had “context” as an argument for template(), as I ctrl c + v the code from the Musicon project. It should have instead the let variable (in this case, “a_articles”).