Javascript: Storing Data in Variables. Beginner error?

Question

Too begin with this is not my code. I'm a beginner hobby coder with Javascript and am using a book from which this exercise came from to learn from. Unfortunately the publishers website is missing the files for the book hence my issue.

The code below should when run show the contents of the str variable. When I run it though I just get a blank browser screen. I've checked for any obvious glaring typos but can't see any. To begin with I created a html document as below

<html>
<head>
<title>Variable</title>

<script type = "text/javascript" src = "variable.js">
obj.innerHTML = str + ":" + typeof str;
</script>   

<body>
<div id = "panel"> </div>
</body>

Then I typed the output code in Notepad and saved that in the same folder as the html code. I also saved the code as a Javascript file in the same place

The output code is below

 function init()
{
    //STATEMENTS TO BE EXECUTED GO HERE
var str = "Text Content in Javascript";

obj.innerHTML = str + ":" + typeof str;
}
document.addEventListener( "DOMContentLoaded", init, false);

From my limited knowledge of Javascript I'm guessing that the code to output the result isn't being seen but I don't understand why or more likely I'm missing something blindingly obvious. Where is the missing link?

You can’t combine JS code and a source for a JS file _in the same ` — Sebastian Simon, Apr 02 '16 at 20:45

score 0 · Answer 1 · answered Apr 02 '16 at 20:46

0

You'r missing a script tag.

<script type = "text/javascript" src = "variable.js"></script>
<script>
obj.innerHTML = str + ":" + typeof str;
</script>

answered Apr 02 '16 at 20:46

Boris Charpentier

3,515
25
28

Thanks for that. Only way I'll get better at coding is to learn from my mistakes even if they are with hindsight obvious ones. – Achill Apr 03 '16 at 19:28

score 0 · Accepted Answer · answered Apr 02 '16 at 21:50

There's a lot going on here.

Missing <!DOCTYPE html>
Missing </head> closing tag
Missing </html> closing tag
Code duplication in the script tag calling variable.js and your variable.js file.
Missing obj variable assignment in variable.js

Here is working code to study:

HTML file

<!DOCTYPE html>
<html>
  <head>
    <title>Variable</title>
    <script src="variable.js"></script>
  </head>
  <body>
     <div id="panel"></div>

     <script>document.addEventListener( "DOMContentLoaded", init, false);</script>
  </body>
</html>

variable.js file

function init() {
    //STATEMENTS TO BE EXECUTED GO HERE
  var str = "Text Content in Javascript";

  var obj = document.getElementById("panel");
  obj.innerHTML = str + ":" + typeof str;
}

Happy learning!

Many thanks for that. I've taken a print out so I can study it in my own time. I want to understand the logic behind it as thats the best way to learn from my mistakes. — Achill, Apr 03 '16 at 19:25

Javascript: Storing Data in Variables. Beginner error?

2 Answers2