How to use onclick function to change ejs variable

user_14001585 0
Viewed 1280

I am creating a web application using Node, Express and ejs. On the same page, I generate a set of buttons (first table below) and a set of corresponding hidden divs (second table below). When a button is clicked I want to display the corresponding div.

<% for(var i = 0; i < stream.length; i++){ %>
<tr>
 <th scope="row"><%= stream[i].streamid %></th>
 <td><%= stream[i].streamname %></td>
 <td><%= stream[i].streamername %></td>
 <td> 
  <button
    class="btn btn-outline-success"
    data-toggle="modal"
    data-target="#streamDetailsModal"
    id="detailsstream"
    onclick="<% ctr = i %>"
  >
  Details
  </button>
 </td>
 <td>
  <a
   class="btn btn-outline-danger"
   href="/stream/delete/<%= stream[i].streamid %>"
  >
  ⊖ Remove
  </a>
 </td>
</tr>
<% } %>

<% for(var i = 0; i < stream.length; i++){ %>
<tr>
  <th scope="row"><%= stream[i].streamid %></th>
  <td><%= stream[i].streamname %></td>
  <td><%= stream[i].streamername %></td>
  <td>
   <button
    class="btn btn-outline-success"
    data-toggle="modal"
    data-target="#streamDetailsModal"
    id="detailsstream"
    data-ctr="<%= i %>"
   >
   Details
  </button>
 </td>
 <td>
  <a
   class="btn btn-outline-danger"
   href="/stream/delete/<%= stream[i].streamid %>"
  >
  ⊖ Remove
 </a>
</td>
</tr>
<% } %>

I need the counter in first loop to change while the user clicks on the details button from the second loop.

express ejs node.js javascript
2 Answers

If you do wish to go with the above logic... the possible way will be to make a server call on the button click, compute the value on the server and the re render the page on the front end. Browser Javascript cannot change or manipulate the ejs logic or variable. That is done on the node server.

user_97335460

The normal way to implement such functionality is to do something like this instead:

in your first loop generating buttons, add each button a handler that shows the div with some unique id (like streamDetailsModal12 for button 12); if you use bootstrap or something similar, you don't even have to implement the handler

  <button
    class="btn btn-outline-success"
    data-toggle="modal"
    data-target="#streamDetailsModal<% i %>"
    id="detailsstream"
    onclick="handler(event)"
  >

and to each div you'd like to show on button click you add corresponding ids:

<div id="streamDetailsModal<% i %>"
> some content </div>

If you implement handler yourself, you have to grab the id from event.target (which is your button holding data-target attribute with the id you want) and then find the element and toggle it's display property or something else you'd like to control visibility.

user_39952610
Related