EJSでonclick関数を作成して使用する方法

Question

私はトリビアゲームを作ろうとしています。私はそれをクリックして答えをクリックすることができ、境界線を作成してポイント変数をインクリメントします。

ここは全体のページです。

<% include ../partials/boilerplate %> 

<% var points = 0; 
correctAnswer = (num) => {  
    document.getElementById(`correctAnswer${i}`).style.border = "5px solid black"; 
    points+=1 
} %> 


<div class="triviaContainer"> 
    <h1>WELCOME TO TOP FACT </h1> 
    <% var i =0; data.forEach(question =>{ %> 
<div class="questionRow"> 
    <div> <%= question.question %></div> 
</div> 
<div class="questionRow1"> 
    <div class="correctAnswer<%= i+=1 %>" onclick= <%= correctAnswer(i) %> > A: <%= question.correct_answer %></div> 
    <div>B: <%= question.incorrect_answers[0].incorrect_answer %></div> 
</div> 
<div class="questionRow2"> 
    <div>C: <%= question.incorrect_answers[1].incorrect_answer %></div> 
    <div>D: <%= question.incorrect_answers[2].incorrect_answer %></div> 
</div> 


<% }) %> 
    </div> 

私はonclickの上記のような質問がループ内で生成されているので、それが疑問何のパラメータを入力するこの機能を使用できるようにしたいです。

<% var points = 0; 
correctAnswer = (num) => {  
    document.getElementById(`correctAnswer${i}`).style.border = "5px solid black"; 
    points+=1 
} %> 

インラインonclickコードを以下に示します。

<div class="correctAnswer<%= i+=1 %>" onclick= <%= correctAnswer(i) %> > A: 
<%= question.correct_answer %></div> 

私は、この問題を解決する最善の方法だろう何EJS

ReferenceError: /Users/jdiperi88/wdi/UNIT_02/projects/trivia/views/trivia/trivia-index.ejs:17 
    15|  </div> 
    16|  <div class="questionRow1"> 
>> 17|   <div class="correctAnswer<%= i+=1 %>" onclick= <%= correctAnswer(i) %> > A: <%= question.correct_answer %></div> 
    18|   <div>B: <%= question.incorrect_answers[0].incorrect_answer %></div> 
    19|  </div> 
    20|  <div class="questionRow2"> 

document is not defined 
    at correctAnswer (eval at compile (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:549:12), <anonymous>:24:9) 
    at data.forEach.question (eval at compile (/Users/jdiperi88/wdi/UNIT_02/projects/trivia/node_modules/ejs/lib/ejs.js:549:12), <anonymous>: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), <anonymous>: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) 

でこのエラーを取得しておきますか？

Answer 1

EJSはサーバー側のjavascriptの助けを借りてビューをまとめてレンダリングします（ブラウザに送信します）。それを超えると機能はありません。あなたが達成しようとしているのは、<script>タグのjavascriptがクライアント側で行うべきことです。

（未テスト）このような何か：

<script> 
var points = 0; 
function correctAnswer(num){  
    document.getElementById(correctAnswer' + num).style.border = "5px solid black"; 
    points+=1; 
} 
</script>