Controlling state in EJS

Question

I want to implement logic where after clicking into the button the counter will be incremented by 5 (5, 10, 15, 20...) and this, so to speak, state, would be used inside the for loop as a second argument (ie. how many loops should it proceed).

<body>
  <% var counter %>
  <% for (var i = 0; i < counter; i++) { %>
    ...some items to be rendered in number of 5, 10, 15 and so on...
  <% } %>
  <button onclick="<%() => counter =  counter + 5%>">Load more</button>
</body>

Above does not work. How can I achieve that kind of state in EJS? Thanks!

score 0 · Answer 1 · answered Jul 16 '19 at 13:36

0

you just have to create a function in ejs which will repeat the step after each button click and on button click we are incrementing the counter an passing it to the function so the function will execute with incremented value.

   <body>
      <% var counter=5 %>
      <% function callLoop(cntr){%>
       <% for (var i = 0; i < cntr; i++) { %>
        ...some items to be rendered in number of 5, 10, 15 and so on...
       <% } %>
      <% } %>

      <button onclick="<%() => callLoop(counter + 5);%>">Load more</button>
   </body>

answered Jul 16 '19 at 13:36

Pranil Tunga

76
7

Thanks for the answer but this is not working, the function is not called. – Murakami Jul 17 '19 at 09:42
I think this will help you some how: https://stackoverflow.com/questions/30535309/where-should-i-define-js-function-to-call-in-ejs-template – Pranil Tunga Jul 20 '19 at 07:06

Controlling state in EJS

1 Answers1