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.