如何在 EJS 中创建和使用 onclick 函数答案

【问题标题】：How to create and use onclick functions in EJS如何在 EJS 中创建和使用 onclick 函数
【发布时间】：2018-01-13 21:57:33
【问题描述】：

我正在尝试制作一个琐事游戏。我想让它在你可以点击答案的地方创建一个边框并增加 points 变量

这是整个页面。

    <% 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>

我希望能够在单击输入问题参数时使用此功能，因为问题是在循环中生成的，如上所示。

<%  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)

解决此问题的最佳方法是什么？

【问题讨论】：

标签： javascript html css express ejs

【解决方案1】：

EJS 只是在服务器端借助 javascript 将视图组合在一起并呈现它（发送到浏览器）。除此之外，它没有任何功能。您想要实现的是 <script> 标记中的 javascript 应该在客户端执行的操作。

类似这样的东西（未经测试）：

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

【讨论】：