如何在 ejs 文件中的 for 循环中动态更改值

Question

I have fetched data from my node js file into my ejs file. Like this:

  <% for(var i=0; i < data.length; i++) { %>
                <tr>
                  <td id="value"><%= i+1 %></td>
                  <td ><%= data[i] %></td>
                  <td><button onclick="myFunction()" id="btn-download" class="btn btn-light"><i class="fas fa-file-download"></i>indir</button></td>
                </tr>
             <% } %>

It renders data properly. But when i wanted to use data's indexes in myFunction(),it shows me the first index. This is myFunction():

<script>
  function myFunction() {
       var text=document.getElementById("value").innerHTML;
        /*var filename="data.txt";
        download(filename,text);*/
        console.log(text)
}
</script>

I want to have

1
2
3

But i have only

1
1
1

How can take the output that i want?

Answer 1

The problem is that you are using multiple elements with same id:

//Step 1. Give unique ids
<td id="value<%= i+1 %>"><%= i+1 %></td>

//Step 2. Pass param to function and use data-id to pass 'ID' of <td>
<td><button onclick="myFunction()" id="btn-download" class="btn btn-light" data-id="value<%= i+1 %>"><i class="fas fa-file-download"></i>indir</button></td>

//Step 3. Use data-id in the javascript function to refer to the <td>
function myFunction() {
      var buttonId=event.target.getAttribute("data-id");;
        var text= document.getElementByID(buttonId).innerHTML;
/*var filename="data.txt";
        download(filename,text);*/
        console.log(text)
}