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

Question

我已经从我的节点 js 文件中提取数据到我的 ejs 文件中。像这样：

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

它正确地呈现数据。但是当我想在 myFunction() 中使用数据的索引时，它显示了第一个索引。这是 myFunction():

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

我想要

1
2
3

但我只有

1
1
1

怎样才能得到我想要的输出？

Answer 1

问题是您正在使用具有相同 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)
}

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

How can i change values dynamically in for loop which is in ejs file

html

javascript

ejs