How to fix loop return incremented value after terminated?

[saeedcs98]

I want to execute this script 2 time and it was perfectly run 2 time but problem is that when in the end of the script when I alert ‘variable X’ it would return 3 instead of 2

for(x=1; x <=2; x++){
      var prog = document.getElementById('progress'+x);
      var courseID = document.getElementById('c-id'+x).value;
      console.log(courseID);
      
      var xhr = new XMLHttpRequest();
      xhr.open("get","../PhpFiles/sendProgress.php?r=returnP&course_id="+courseID,true);
      xhr.send();
      xhr.onreadystatechange = function(){
      if(xhr.readyState==4 && xhr.status==200){
     
      prog.innerText = xhr.responseText+'%';
       
        alert("after response:"+ x);
       move(xhr.responseText,x);
        
     
      }
    }
  }

[droopsnoot]

That’s correct - after the loop has finished, the value of x is 3, and that is why the loop terminated. If you look at your opening loop:

for(x=1; x <=2; x++){

you’re saying "set x to 1, loop around while it’s less than or equal to 2, and increment by one each time. At the end of the first loop it’s incremented to 2, which fits in the loop condition and the loop executes a second time. At the end of the second loop, it’s incremented to 3, which is outside the condition, so the loop terminates.

[saeedcs98]

exactly that’s right but what will be x in below which is second last statement in for block ?

@saeedcs98

alert(“after response:”+ x);

[Mittineague]

Whatever the value is after the “x++” for any particular pass through the loop.

Kind of like

• this is the beginning variable value
• if the value meets this condition proceed, else next statement after the loop (after the { … } )
• increase variable value
• enter loop and do the stuffs then check condition again
• if the value meets this condition proceed, else next code block
• increase variable value
• enter loop (the { … } ) and do the stuffs then check condition again
• etc. etc.

I’m guessing the easiest solution would be to change the “meets the condition” (the “x<=2”).

But TBH, I question doing AJAX in a loop and would likely try a different approach.

[saeedcs98]

yes friend I know that every time when condition is true so it would enter in the code block and executes all statement and after that increase by 1 and again check condition if it’s true again all things happen in same way until the condition will be false

but my question is that I call alert with the value of x in the second last statement and In first iteration here ‘x’ should be 1 and 2nd iteration it should be 2 but when I run this page both 1 and 2 no where and alert pop up only one time with 3 but why and how it was 3

[Mittineague]

Maybe you’re looking to change the “start” value? the “x=1”

I have a feeling your misunderstanding is

@saeedcs98

enter in the code block and executes all statement and after that increase by 1

This is incorrect, it is

increase by 1 and after that enter in the code block and executes all statement

[saeedcs98]

and what about first time execution of loop if x=0 and the condition x<= 0 and x++, So first it will increase by 1 and after that it will check condition and it’s true then enter in the code block and so on , please let me know if I am wrong?

[Mittineague]

Maybe temporarily changing the code to this will help?

for(x=1; x <=2; x++){ 
        alert("before response:"+ x); 
      var prog = document.getElementById('progress'+x);
      var courseID = document.getElementById('c-id'+x).value;
      console.log(courseID);
      
      var xhr = new XMLHttpRequest();
      xhr.open("get","../PhpFiles/sendProgress.php?r=returnP&course_id="+courseID,true);
      xhr.send();
      xhr.onreadystatechange = function(){
      if(xhr.readyState==4 && xhr.status==200){
     
      prog.innerText = xhr.responseText+'%';
       
        alert("after response:"+ x); 

For what reason(s) is the conditional “<=” and not “<”? Perhaps decrementing from a higher value would be better?

[saeedcs98]

alright got it and what is the output of x in this alert ?

@Mittineague

alert(“after response:”+ x);

[Mittineague]

@saeedcs98

what is the output of x in this alert ?

Sorry, I don’t know what your asking, it doesn’t give you a value?

Have you got any answers to my earlier questions?

[saeedcs98]

Actually I understand the way for loop works as you tell me earlier but ask you you that

for(x=1; x <=2; x++){ 
        alert("before response:"+ x);  <------ what's the value of X in this line in 1st iteration
      var prog = document.getElementById('progress'+x);
      var courseID = document.getElementById('c-id'+x).value;
      console.log(courseID);
      
      var xhr = new XMLHttpRequest();
      xhr.open("get","../PhpFiles/sendProgress.php?r=returnP&course_id="+courseID,true);
      xhr.send();
      xhr.onreadystatechange = function(){
      if(xhr.readyState==4 && xhr.status==200){
     
      prog.innerText = xhr.responseText+'%';
       
        alert("after response:"+ x); <----- what is the value of this X in here in first iteration

according my sense of logic X = 1 in first iteration , Am I right ?
but problem is that when compile this code it outputs value of x = 3 (Note: this x is in the last statement in after response ) in first iteration but why and how it output x = 3 in first iteration

I hope now you understand what I am asking

[Mittineague]

If you’re not getting the alert those lines won’t help any. Not a terrible thing, alert boxes are a crude “quick and dirty” debugging tool. There are much better tools.

Try this instead

…
// alert("before response:"+ x);  
console.log("before response:"+ x); 
…
//        alert("after response:"+ x); 
          console.log("after response:"+ x); 

This will allow you to run your code in your browser and look in your dev tools so you can see what gets logged similar to the

console.log(courseID);

[saeedcs98]

Alright thank you