Как присвоить списку объектов идентификаторы и добавить событие щелчка на основе каждого идентификатора списка в Django

В моем Django-коде есть список цен. Теперь я присвоил им уникальные идентификаторы, что работает хорошо, но когда я пытаюсь добавить событие click, событие click работает только для одного элемента списка непрерывно.

      {% for price in logistic_branch_pricing %}
      <h1 id="select-delivery-location-{{price.id}}" 
   onclick="calculateDeliveryPrice()">{{ price.id }}-{{price.small_kg_price}}
      </h1>
      
      {% endfor %}

   {% for price in logistic_branch_pricing %}
   <script>
    function calculateDeliveryPrice() {
      var omo = document.getElementById("select-delivery-location-{{ price.id }}")
      omo.classList.add('d-none')
      console.log(omo)
    }
  </script>
   {% endfor %}

Вам не нужно добавлять цикл в тег <script> просто передайте ключевое слово event внутри функции javascript onclick, как это

{% for price in logistic_branch_pricing %}
   <h1 id="select-delivery-location-{{price.id}}" onclick="calculateDeliveryPrice(event)">{{ price.id }}-{{price.small_kg_price}}
   </h1>
{% endfor %}

и внутри вашего javascript сделайте вот так

<script>
    function calculateDeliveryPrice(e) {
        var omo = e.target
        omo.classList.add('d-none')
        console.log(omo) // returns element
        console.log(omo.id) // returns id of element
    }
</script>
Вернуться на верх