How to get in Javascript specific Object of iteration done in a Django template

Question

I have the next iteration in a Django template. This shows me a group of images and their title.

    {% for i in blogs %}
        <div class="content__blog">
            <h4 class="content__blog__h4">{{i.title}}</h4>
            <img class="content__blog__img" src="{{i.image.url}}" onclick="clickImage()">
        </div>
    {% endfor %}

What i want to do by adding JavaScript is that when clicking on an Image it'll resize. But only the image clicked. How do i specify in the JS file which image i'm clicking on?

rahul.m · Accepted Answer · 2021-09-28 06:50:35Z

1

try something like this

{% for i in blogs %}
    <div class="content__blog">
         <h4 class="content__blog__h4">{{i.title}}</h4>
         <img class="content__blog__img" id="{{i.id}}" src="{{i.image.url}}" onclick="clickImage(this)">
     </div>
{% endfor %}

js

function clickImage(e){
   // e is image element
   alert(e.id)
}

edited Sep 28, 2021 at 6:50

answered Mar 18, 2021 at 12:25

rahul.m

5,8363 gold badges29 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get in Javascript specific Object of iteration done in a Django template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related