getElementById using a looping variable

Question

I want to fetch a String from my DB and put it into my paragraphs:

<p id="q_1"></p>
<p id="q_2"></p>

This here works fine:

$.get("bewertung/get/1", function (data) {
      document.getElementById("q_1").innerHTML = data[0].question;
})

This here doesnt work. Why and how to solve this?

for( var j = 1; j <= 5; j++){
    $.get("bewertung/get/"+j+"", function (data){
         document.getElementById("q_"+j+"").innerHTML = data[0].question;
    })
}
//data[0].question is the field in the DB

will you please provifr return data also ? – Vivek Doshi Jun 14 '17 at 19:30 — Vivek Doshi, Jun 14 '17 at 19:30
you check for `data[0].question` outside the loop? – amiramw Jun 14 '17 at 19:35 — amiramw, Jun 14 '17 at 19:35

G07cha · Accepted Answer · 2017-06-14T19:39:59.877

1

That is caused by the fact that when you receive a response from the server(or do any other asynchronous operation loop will be done and j variable will be having value 6. To prevent this you need to create closure for asynchronous operations that is being used in for loops. Note that I've used setTimeout instead of AJAX.

for( var j = 1; j <= 5; j++){
    (function(k) {
        setTimeout(function() {
           document.getElementById("q_" + k).innerHTML = 'data';
        });
    })(j);
}

<p id="q_1"></p>
<p id="q_2"></p>
<p id="q_3"></p>
<p id="q_4"></p>
<p id="q_5"></p>

edited Jun 14 '17 at 19:39

answered Jun 14 '17 at 19:38

G07cha

4,009
2
22
39

Just beat me to it, mon. – bowheart Jun 14 '17 at 19:39
Feel free to edit my answer if you know more information about this. – G07cha Jun 14 '17 at 19:41
But why take out the AJAX? Seems critical – Xavier J Jun 14 '17 at 19:43
1

@XavierJ ajax isn't required to demonstrate the problem/solution. – Kevin B Jun 14 '17 at 19:43
@KevinB is right, this applies to all asynchronous operations, also most of JS sandboxes doesn't allow to make network requests(haven't tried in this one though) – G07cha Jun 14 '17 at 19:45
This works! Thank you very much for your answer. As he said: note that ajax has to be put instead of setTimeout – Aleks Jun 14 '17 at 19:46

getElementById using a looping variable

1 Answers1