title: chrome dev tools crashed during initialization call
body: <p>The code below crashed on this line, <code>document.body.appendChild(script);</code>, where the new script gets added to the body element.The page crashed and browser's debugger tool showed this message <code>DevTools was disconnected from the page. Once page is reloaded, DevTools will automatically reconnect</code>. I'm not sure what is the error that caused the debugger tool to crash since the same process of adding and removing script to get random quote worked with <code>#btn-quote</code> click event. I've also tried to have the init function call when the page is loaded by replacing <code>appController.init();</code> with <code>window.onload = init;</code>, but the same error still occurred. I would really appreciate with anyone can point out any logical error I made in the code below as I'm not able to figure them out.</p>
  
  <pre><code>var dataController = (function() {
      var data = {
          quote: '',
          author: ''
      }
      function setRandomQuote() {
          var script = document.createElement('script'); 
          script.src = 'http://api.forismatic.com/api/1.0/?method=getQuote&amp;lang=en&amp;format=jsonp&amp;jsonp=parseQuote'; 
          document.body.appendChild(script);
  
          window.parseQuote= function(json) {
              data.quote = json.quoteText;
              data.author = json.quoteAuthor;
          }
          script.parentNode.removeChild(script);
      }
      return {
          getQuote: function() {
              setRandomQuote();
              return data;
          }
      };
  })();
  
  
  var UIController = (function(){
  
      return {
          changeQuote: function(data) {
              document.querySelector('q').innerHTML = data.quote;
              document.querySelector('cite').innerHTML = data.author;
          }
      }
  })();
  
  
  var appController = (function(dataCtrl, UICtrl) {
      var setupEventListener = function() {
          document.querySelector('#btn-quote').addEventListener('click', getRandomQuote);
      };
  
      function getRandomQuote() {
          var data= {};
          // 1. get quote
          var data = dataCtrl.getQuote();
  
  
          // 2. change UI with new quote
         UICtrl.changeQuote(data);
      }
  
      return {
          init: function() {
              setupEventListener();
              getRandomQuote();
          }
      }
  
  })(dataController, UIController); 
  
  
  appController.init();
  </code></pre>