run js on html element dynamically with Django(template)

Question

I want to run price_update() function on h6 element

{% for products in allProducts %}
<div class="col-6"> 
    Final Price: <h6 id="final_price_{{product.slug}}" onload="price_update({{products.price}},{{products.offer}}, {{product.slug}})"></h6>                                    
</div>

<script type="text/javascript">
function price_update(price, offer, slug) {
    let discounted_price = price- parseInt(price * offer / 100);
    let id = "final_price_" + String(slug);
    let f_price = document.getElementById(id);
    f_price.innerText = discounted_price;                                   
}
</script>
{% endfor %}

I got to know that onload cannot be used with <h6> . How can update innerText of <h6> for every product?

Amin Mir · Accepted Answer · 2020-08-13 08:46:44Z

Create a custom template tag, do the arithmetic calculations there and, get the result :

In one of your apps create a new folder that is named templatetags
paste in the folder the __init__.py file to ensure the directory is treated as a Python package.
In templatetags folder, create a new module. This module is the one that would be loaded in your template. something like : myapp_extras.py
Import desired models (product) and then, add register = template.Library() to ensure the the module is a valid tag library
Register the custom filter by:

register the filter

@register.filter(name='price_update')
def price_update(product_id):
    # Get the product by id, and calculate the price
    
    # Return updated price

Load the module {% load myapp_extras %} in the template then, in your template use price_update tag:

<div class="col-6"> 
    Final Price: <h6 id="final_price_{{product.slug}}" >{{product.id|price_pudate}}</h6>                                    
</div>

Kaushik Kakdey · Accepted Answer · 2020-08-21 17:27:21Z

1

Solution https://stackoverflow.com/a/63391216/14020019 by Amin Mir absolutely correct but I've implemented the solution in different way.
My Solution : I've added property in my model
```
@property
def final_price(self):
    f_price = self.price - (self.price * self.offer // 100)
    return f_price
```
using this I directly used the final_price using . operator, i.e. product.final_price

answered Aug 21, 2020 at 17:27

Kaushik Kakdey

6736 silver badges11 bronze badges

Collectives™ on Stack Overflow

run js on html element dynamically with Django(template)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related