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>

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

1 个答案: