title: How to require javascript model files within the index.js file?
body: <p>I have 2 model files containing a constructor in each, and an index.js file, that I wish to use to insert elements into a HTML file, using innerHTML. I want to use one of the variables from the js model file, however when I try to require the files in the index.js file, the innerHTML file suddenly stops working. Please note, the code in the current `window.onload' function is inserting h1 elements as a test, I will be replacing this with a return value from the constructor, but at the moment, when I require the files, even the h1 insert stops working. Code snippets that I think are relevant can be seen below:</p>
  
  <p>index.js file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ToDo = require('../src/toDo.js');
  var ToDoList = require('../src/toDoList.js');
  
  window.onload = function() {
  
           // create a couple of elements in an otherwise empty HTML page
           var heading = document.createElement("h1");
           var heading_text = document.createTextNode("Big Head!");
           heading.appendChild(heading_text);
           document.body.appendChild(heading);
        }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Model file 1:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ToDo(task) {
    this.task = task;
    this.complete = false;
  }
  
  module.exports = ToDo;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ToDoList() {
    this.array = [];
  }
  
  ToDoList.prototype.add = function(task) {
    this.array.push(task);
  };
  
  ToDoList.prototype.popTask = function() {
    var poppedTask = this.array.pop();
    var concat = "&lt;ul&gt;&lt;li&gt;";
    var concat2 = "&lt;/li&gt;&lt;/ul&gt;";
    return (concat + poppedTask.task + concat2);
  };
  
  module.exports = ToDoList;</code></pre>
  </div>
  </div>
  </p>