Accessing an element in django for loop

Question

I have a Django template with the following code which creates multiple buttons and tries to delete/hide one of them on a click (on the same button):

{% for h in helicopters %} <div class="btn-group" id="remove-heli"> <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'> {{ h }} </button> </div> {% endfor %}

where helicopters is a list of strings, and later in the script block I have

function my_func(h) { document.getElementById('remove-heli').style.visibility = 'hidden'; }

The function runs, but as you may expect, it runs only on the first element of my for loop, because all the <\div> elements in the for loop have the same id.

My question is: is there a way to point to the particular element? or alternatively, is there a better way to print buttons next to each other?

falsetru · Accepted Answer · 2015-11-11 09:22:22Z

How about set different ids for the div elements?

{% for h in helicopters %} <div class="btn-group" id="remove-heli-{{ h }}"> <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'> {{ h }} </button> </div> {% endfor %}

Then, you can access the specific div element with the id.

function my_func(h) { document.getElementById('remove-heli-' + h).style.visibility = 'hidden'; }

NOTE

Using same ID for several elements is not a good idea. Use unique id.

UPDATE

Alternatively, you can use forloop.counter:

{% for h in helicopters %} <div class="btn-group" id="remove-heli-{{ forloop.counter }}"> <button type="button" class="btn btn-default" onclick='my_func("{{ h }}")'> {{ h }} </button> </div> {% endfor %}

Was 5s away from posting the same thing. You win. Also, maybe you could add to this that giving several elements the same id is forbidden and should never be done.
@spectras, I added a note to mention about the id. Thank you for the comment.
worked like a charm, thanks! I knew non-unique ids was a bad idea (regardless of the language/platform and the problem), but did so to explain what I want to do.
You beat me, good job. But h is probably a django model, it would render as a fairly big string most likely.. could even have quotes in it. So, that this works is lucky.
Alternatively, use {{ forloop.counter }} for a numeric suffix.

little_birdie · Accepted Answer · 2015-11-11 18:25:39Z

This could actually be accomplished more simply by passing this to my_func, eg:

onclick='my_func(this);'

The this variable contains the DOM element which triggered the event, so it would be whatever button was clicked.

function my_func(this) { this.style.visibility = 'hidden'; }

But this of course only works when you want the button to hide itself. If you want it to hide something else, then using different id's is the way...

If you are still confused about the whole "what runs where" thing.. just do a View Page Source on the browser and you'll see exactly what your template generated. Everything else happens in the browser. The browser developer tools are your friend here.. open them up so you can see any errors you are getting etc. If you want to do this stuff you need to get into using the developer part of the browser, you will go insane otherwise.

Collectives™ on Stack Overflow

Accessing an element in django for loop

2 Answers 2

8 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Linked

Related