title: How to create and use onclick functions in EJS
body: <p>I am trying to make a trivia game. I want to make it where you can click on an answer and that creates a border and increments the points variable</p>
  
  <p>Here is the the whole page.</p>
  
  <pre><code>    &lt;% include ../partials/boilerplate %&gt;
  
  &lt;%  var points = 0; 
  correctAnswer = (num) =&gt;  {     
      document.getElementById(`correctAnswer${i}`).style.border = "5px solid black";
      points+=1
   } %&gt;
  
  
  &lt;div class="triviaContainer"&gt;
      &lt;h1&gt;WELCOME TO TOP FACT &lt;/h1&gt;
      &lt;% var i =0; data.forEach(question =&gt;{  %&gt;
  &lt;div class="questionRow"&gt;
      &lt;div&gt; &lt;%= question.question %&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="questionRow1"&gt;
      &lt;div class="correctAnswer&lt;%= i+=1 %&gt;" onclick=  &lt;%= correctAnswer(i) %&gt;  &gt; A: &lt;%= question.correct_answer %&gt;&lt;/div&gt;
      &lt;div&gt;B: &lt;%= question.incorrect_answers[0].incorrect_answer %&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="questionRow2"&gt;
      &lt;div&gt;C: &lt;%= question.incorrect_answers[1].incorrect_answer %&gt;&lt;/div&gt;
      &lt;div&gt;D: &lt;%= question.incorrect_answers[2].incorrect_answer %&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
   &lt;%   }) %&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to use this function onclick entering a parameter of what question it is since the questions are being generated in a loop as shown above. </p>
  
  <pre><code>&lt;%  var points = 0; 
  correctAnswer = (num) =&gt;  {     
      document.getElementById(`correctAnswer${i}`).style.border = "5px solid black";
      points+=1
   } %&gt;
  </code></pre>
  
  <p>The inline onclick code is listed below.</p>
  
  <pre><code> &lt;div class="correctAnswer&lt;%= i+=1 %&gt;" onclick=  &lt;%= correctAnswer(i) %&gt;  &gt; A: 
  &lt;%= question.correct_answer %&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I keep getting this error in ejs </p>
  
  <pre><code>    ReferenceError: /Users/jdiperi88/wdi/UNIT_02/projects/trivia/views/trivia/trivia-index.ejs:17
      15|     &lt;/div&gt;
      16|     &lt;div class="questionRow1"&gt;
   &gt;&gt; 17|         &lt;div class="correctAnswer&lt;%= i+=1 %&gt;" onclick=  &lt;%= correctAnswer(i) %&gt;  &gt; A: &lt;%= question.correct_answer %&gt;&lt;/div&gt;
      18|         &lt;div&gt;B: &lt;%= question.incorrect_answers[0].incorrect_answer %&gt;&lt;/div&gt;
      19|     &lt;/div&gt;
      20|     &lt;div class="questionRow2"&gt;
  
  document is not defined
      at correctAnswer (eval at compile (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:549:12), &lt;anonymous&gt;:24:9)
      at data.forEach.question (eval at compile (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:549:12), &lt;anonymous&gt;:38:26)
      at Array.forEach (native)
      at eval (eval at compile (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:549:12), &lt;anonymous&gt;:30:23)
      at returnedFn (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:580:17)
      at tryHandleCache (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:223:34)
      at View.exports.renderFile [as engine] (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:437:10)
      at View.render (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/express/lib/view.js:128:8)
      at tryRender (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/express/lib/application.js:640:10)
      at Function.render (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/express/lib/application.js:592:3)
  </code></pre>
  
  <p>What would be the best way of solving this issue?</p>