fts_acer fts_acer - 4 months ago 34
Javascript Question

Handlebars is not defined

I am new at JS and never tried Handlebars before. I'm trying a very bare-bones example from a tutorial. I have downloaded

handlebars-v4.0.5.js
from the Handlebars website and included it in my page, as follows, along with a template I precompiled,
name-table.js
. I'm trying my god damned hardest to complete this tutorial but I can't, because when I run the following code, I get
ReferenceError: Handlebars is not defined
which I can't for the life of me understand, if the file I downloaded from Handebars' own site is in any way valid.

<html>
<head>
<meta charset='UTF-8'>
<title>Test Page!</title>
<script type='text/javascript'>
function init() {
document.getElementById('button').addEventListener('click', buttonClick, false);
}
function buttonClick() {
var injection = Handlebars.templates['name-table'];
document.getElementById('button').innerHTML = injection;
console.log('hello, world.');
}

window.addEventListener('load', init, false);
</script>
</head>
<body>
<button id='button'>Button</button>
<div id='content'></div>

<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
</body>
</html>


Edit:
The answer I marked solved the problem. Another error appears in this code, and I want to let anyone reading this know that
var injection
as defined in this code is a function, not a string as I had thought. This code will work if
rel
is changed to
src
as in the answer given, and if we use
document.getElementById('button').innerHTML = injection();
(note the parens).

Answer

You are not loading in Handlebars (or your name-table script). You currently have the following markup:

    <script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
    <script type='text/javascript' rel='js/name-table.js'></script>

You should be using the src attribute instead of the rel attribute for script tags.

    <script type='text/javascript' src='js/handlebars-v4.0.5.js'></script>
    <script type='text/javascript' src='js/name-table.js'></script>

The Mozilla documentation does not specify the rel attribute as a valid script tag attribute.