My goal is to develop a trivia game with interactive features. I aim to enable users to click on an answer, which will trigger a border effect and increase the points variable.
Below is the layout of the entire page:
<% 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>
I am looking for a method to use this function by clicking on it and providing a parameter indicating the respective question, since questions are dynamically generated in a loop as demonstrated above.
<% var points = 0;
correctAnswer = (num) => {
document.getElementById(`correctAnswer${i}`).style.border = "5px solid black";
points+=1
} %>
Here is the inline onclick code snippet:
<div class="correctAnswer<%= i+=1 %>" onclick= <%= correctAnswer(i) %> > A:
<%= question.correct_answer %></div>
Encountering an error while using 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)
What would be the optimal solution to resolve this issue?