title: EJS Inline DOM Selector Undefined
body: <p>I'm using Node.js, Express, Chart.js and EJS for templates. I want a template that gets passed a variable with a list of objects. Each object defines a chart for Chart.js to render in the webpage.</p>
  
  <p>Chart.js requires that you store the canvas from the DOM in a variable which you pass as an argument to the <code>new Chart()</code> but in the code below, my EJS references <code>document</code> which gets an error saying it's undefined at the time of referencing it. How can I get around this?</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-html lang-html prettyprint-override"><code>&lt;div class='report-content'&gt;
      &lt;!-- 'reportSheet' is a variable passed in from the Express route definition. --&gt;
      &lt;!-- for each chart object in the list of charts... --&gt;
      &lt;% reportSheet.forEach(function(chart){ %&gt;
          &lt;!-- create area for that chart --&gt;
          &lt;div class="chart-region"&gt;
              &lt;div class="chart-item"&gt;
                  &lt;h3&gt;Chart Title&lt;/h3&gt;
                  &lt;canvas id="myChart" width="400" height="200"&gt;&lt;/canvas&gt;
                  &lt;% var ctx = document.getElementById("myChart"); %&gt;
                  &lt;% var myChart = new Chart(ctx, chart); %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;% }); %&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the example way to build a chart according to the Chart.js docs:</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-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  var ctx = document.getElementById('myChart').getContext('2d');
  var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'line',
  
      // The data for our dataset
      data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [{
              label: "My First dataset",
              backgroundColor: 'rgb(255, 99, 132)',
              borderColor: 'rgb(255, 99, 132)',
              data: [0, 10, 5, 2, 20, 30, 45],
          }]
      },
  
      // Configuration options go here
      options: {}
  });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For some context: the point is for users to be able to view the webpage and add new charts like a dashboard, so the database needs to store a list of every chart they make for the dashboard.</p>
  
  <p>Thanks for any help.</p>