javascript - Accessing an element in django for loop - Stack Overflow

admin管理员组

文章数量:1291583

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?

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?

• javascript
• python
• django

Share Improve this question Follow asked Nov 11, 2015 at 2:22 gevragevra 75633 gold badges1414 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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 %}

This could actually be acplished 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.

本文标签： javascriptAccessing an element in django for loopStack Overflow