Как выбрать отдельный id элемента HTML, который находится внутри цикла for в шаблоне Django?

Я пытаюсь выбрать HTML-кнопку, которая находится внутри цикла for в шаблоне Django, используя querySelector, чтобы добавить к ней слушателя событий в JavaScript. Как создать уникальный id для кнопки и выбрать ее через JavaScript? Сейчас у меня есть один id, установленный для кнопки в цикле for, и при нажатии на кнопку ничего не происходит.

html

% for post in page_obj.object_list %}
            <div class = "individual_posts">
                <a href="{% url 'username' post.user %}"><h5 class = "post_user">{{ post.user }}</h5></a>
                <h6 id = "post_itself">{{ post.post }}</h6>
                {% if post.user == request.user %}
                    <button id="editButton" class="edit_button">Edit</button>
                {% endif %}
            </div>
        {% endfor %}

JavaScript

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#editButton').onclick = edit_email();
})

Все ваши кнопки будут иметь одинаковый HTML id, одним из простых способов различия будет включение счетчика forloop следующим образом:

id="editButton{{ forloop.counter0 }}"

Затем вы можете указать кнопку в своем javascript.

Однако я полагаю, что вы хотите добавить функциональность onclick для всех кнопок. Ваш JS выбирает на основе id, используя селектор #, если вы измените его на ('.edit_button'), он должен работать для всех кнопок

Вернуться на верх