title: node ejs dynamic javascript load
body: <p>So i am trying to have the routes file pass a list of javascript files that need to be included for the page and have ejs construct the header to include these scripts </p>
  
  <p>My routes file </p>
  
  <pre><code>router.get('/:name', function(req,res, next) {
    res.render('templates/experiment', {
      name:req.params.name,
      extraScripts:experiments[req.params.name].extraScripts
    })
  });
  </code></pre>
  
  <p>my experiment.ejs</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;&lt;%= name %&gt;&lt;/title&gt;
    &lt;script src="../javascripts/p5/p5.js"&gt;&lt;/script&gt;
    &lt;script src="../javascripts/p5/addons/p5.dom.js"&gt;&lt;/script&gt;
    &lt;script src="../javascripts/p5/addons/p5.sound.js"&gt;&lt;/script&gt;
    &lt;% for(var i = 0; i &lt; extraScripts.length; i++) { %&gt;
      &lt;script scr=&lt;%= "../javascripts/" + extraScripts[i]%&gt; &gt;&lt;/script&gt;
    &lt;% }%&gt;
    &lt;script src=&lt;%= "../javascripts/experiments/"+name + "/sketch.js"%&gt;&gt;&lt;/script&gt;
    &lt;style&gt; body {padding: 0; margin: 0;} &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>now when i load the page i can see the script tag just fine but it is not doing the actual loading of the extra scripts.  </p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;snake&lt;/title&gt;
    &lt;script src="../javascripts/p5/p5.js"&gt;&lt;/script&gt;
    &lt;script src="../javascripts/p5/addons/p5.dom.js"&gt;&lt;/script&gt;
    &lt;script src="../javascripts/p5/addons/p5.sound.js"&gt;&lt;/script&gt;
  
    &lt;script scr=../javascripts/library/colors.js &gt;&lt;/script&gt;
  
    &lt;script src=../javascripts/experiments/snake/sketch.js&gt;&lt;/script&gt;
    &lt;style&gt; body {padding: 0; margin: 0;} &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>that colors.js file is not loading am I missing something, the sketch.js is dynamic and it loads just fine.</p>