Блог

Главная - Вопросы по программированию - Как я могу динамически изменять значения в цикле for, который находится в файле ejs

Как я могу динамически изменять значения в цикле for, который находится в файле ejs

#javascript #html #ejs

Вопрос:

Я извлек данные из своего файла node 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(),он показывает мне первый индекс. Это моя функция():

 <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

Как можно получить результат, который я хочу?

Комментарии:

1. Привет, один из способов-передать i 1 его непосредственно в функцию, onclick="myFunction(i 1)" а затем получить к нему прямой доступ в функции.

2. Вы используете id селектор, вот почему он будет отображаться 1 только

3. Сгенерированный вами HTML-код недействителен. Не допускается наличие нескольких элементов с одним и тем же идентификатором. Идентификатор должен быть уникальным.

Ответ №1:

Проблема в том, что вы используете несколько элементов с одинаковым идентификатором:

 //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)
}
Метки: ,