Javascript无法在Django循环中刷新

Question

I have a Django template (html), and a javascript in it that I want to loop for various pair values. It doesn't loop.

Here is the code in the template rsmgui.html:

{% for field in elements %}

            <input type="hidden" id="theFieldLabelID" name="theFieldLabel" value="{{ field.label }}">
            <input type="hidden" id="theFieldID" name="theField" value="{{ field }}">

            <script src="{{ STATIC_URL }}js/loadStorage.js"></script>
{% endfor %}

The javascript loadStorage.js looks like this:

var myFieldLabel=document.getElementById("theFieldLabelID").value.replace(/ /g,"")

var myField = document.getElementById("theFieldID")
alert("Label = " + myFieldLabel);
localStorage.setItem(myFieldLabel, JSON.stringify(myField));

But it doesn't loop, it gets the first pair and then repeats it for the number of pairs. Any ideas how to "flush" the javascript so it reloads each time?

Answer 1

it gets the first pair and then repeats it for the number of pairs

That is because getElementById only returns first element . Element ID should be unique across the page. Without changing your logic, there are two solutions below.

First one is to add loop counter suffix:

{% for field in elements %}

            <input type="hidden" id="theFieldLabel{{ forloop.counter }}" name="theFieldLabel" value="{{ field.label }}">
            <input type="hidden" id="theField{{ forloop.counter }}" name="theField" value="{{ field }}">

            <script>var id_suffix = "{{ forloop.counter }}"</script>
            <script src="{{ STATIC_URL }}js/loadStorage.js"></script>
{% endfor %}

var myFieldLabel=document.getElementById("theFieldLabel" + id_suffix).value.replace(/ /g,"")

var myField = document.getElementById("theField" + id_suffix)
alert("Label = " + myFieldLabel);
localStorage.setItem(myFieldLabel, JSON.stringify(myField));

Second one is to use getElementsByName:

{% for field in elements %}

            <input type="hidden" id="theFieldLabelID" name="theFieldLabel" value="{{ field.label }}">
            <input type="hidden" id="theFieldID" name="theField" value="{{ field }}">

            <script>var index = {{ forloop.counter0 }}</script>
            <script src="{{ STATIC_URL }}js/loadStorage.js"></script>
{% endfor %}

var myFieldLabel=document.getElementsByName("theFieldLabel")[index].value.replace(/ /g,"")

var myField = document.getElementsByName("theField")[index]
alert("Label = " + myFieldLabel);
localStorage.setItem(myFieldLabel, JSON.stringify(myField));

Considering @sytech comment, you can wrap your code into function with a parameter is the index/id_suffix. Then call it with necessary value.

<script src="{{ STATIC_URL }}js/loadStorage.js"></script>
{% for field in elements %}

            <input type="hidden" id="theFieldLabel{{ forloop.counter }}" name="theFieldLabel" value="{{ field.label }}">
            <input type="hidden" id="theField{{ forloop.counter }}" name="theField" value="{{ field }}">

            <script>loadStorage("{{ forloop.counter }}");</script>
{% endfor %}

function loadStorage(id_suffix)
{
    var myFieldLabel=document.getElementById("theFieldLabel" + id_suffix).value.replace(/ /g,"")

    var myField = document.getElementById("theField" + id_suffix)
    alert("Label = " + myFieldLabel);
    localStorage.setItem(myFieldLabel, JSON.stringify(myField));
}