javascript - 如何在 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 将 View 放在一起并呈现它(发送到浏览器)。除此之外，它没有任何功能。您要实现的是 <script> 中的 javascript标记应该在客户端执行。

像这样(未经测试):

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