时间戳

首页 > 解决方案 > 为什么 Javascript 不能与 Django HTML 一起使用？

javascript - 为什么 Javascript 不能与 Django HTML 一起使用？

问题描述

我正在尝试在我的 Django 网站中添加一些 javascript 代码。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 行看到有 for 循环。它遍历所有产品并添加自己的“添加到购物车”按钮。警报仅适用于第一个按钮。谢谢你。

标签： javascripthtmldjango

解决方案

问题是您正在为列表中的每个产品创建一个“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');
    }
)

推荐阅读