Почему Javascript не работает с Django HTML?

Question

Я пытаюсь разместить код javascript на моем Django веб-сайте. Код javascript должен проверять, нажаты ли кнопки, и предупреждать пользователя, если они нажимаются. Однако это работает только для первой кнопки. Поскольку я перебираю все кнопки, чтобы отобразить их, я думаю, что javascript не видит его как код HTML. Вот код javascript.

const card = document.querySelector('.card');

card.addEventListener('click', e => {
  if (e.target.classList.contains('btn')) {
    alert('hi')
  }
})

Вот HTML / Django код:

{% extends "/Users/marco/Documents/codes/Python/Django/vracenmasse/templates/base_generic.html" %}
{% load static %}
{% block content %}

    <center><h1>Nos Produits</h1></center>
    <hr>

    <div class="row" style = "border: 50px solid white;">

            {% for product in products %}

                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="../../../media/{{ product.product_picture.name }}" alt="{{ product.product_picture.name }}">
                      <div class="card-body">
                        <center>
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text">{{ product.product_price|floatformat:2 }}$ / unité</p>
                            <p class="card-text">Catégorie : {{ product.type_of_product }}</p>
                            {% if product.new_product == "yes" %}
                                <b><p class="card-text"><font size="3.5" color="Orange">Nouveaux!</font></p></b>
                            {% endif %}
                            {% if product.availability == "Out Of Stock"%}
                                <b><p class="card-text"><font size="1.5" color="red">En rupture de stock</font></p></b>
                                <hr>
                                <button type="button" class="btn btn-primary" disabled>Ajouter au Panier</button>
                            {% else %}
                                <p style="font-size:15;">Quantité : </p><input type="number" step="12" min="0" />
                                <span class="validity"></span>
                                <hr>

                                <button type="button" class="btn btn-outline-primary" id='realbutton'>Ajouter au Panier</button>

                            {% endif %}

                            <div class="alert alert-success alert-dismissible fade show" role="alert" style ="visibility:hidden;">
                              <center>Produit ajouté au panier!</center><button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>


                        </center>
                  </div>
                </div>  
                &nbsp;
            {% endfor %}
        </div>
</div>


<script src="{% static "products/buttonalerts.js" %}"></script>  
{% endblock %}

Первая кнопка - единственное, что работает. Мы видим, что в строке №6 есть значение l oop. Он перебирает все продукты и добавляет свою собственную кнопку «Добавить в корзину». Однако предупреждение работает только для первой кнопки. Спасибо.

Answer 1

Проблема в том, что вы создаете элемент «div» для каждого продукта в своем списке, но метод querySelector () возвращает только первый элемент с указанным классом.

Вам необходимо использовать querySelectorAll (), чтобы получить список со всеми элементами, а затем применить прослушиватель событий к каждому из них:

const cards = document.querySelectorAll('.card');

for (let i = 0; i < cards.length; i++) {
    cards[i].addEventListener('click', e => {
        if (e.target.classList.contains('btn')) {
            alert('hi')
        }
    }
)

Другое решение - запросить напрямую элементы, содержащие класс «btn», и добавить прослушиватель событий для тех:

const buttons = document.querySelectorAll(".btn");

for (let i = 0; i < buttons.length; i++) {                  
    buttons[i].addEventListener('click', function() {
        alert('hi');
    }
)