title: Javascript and jQuery: onclick event listener to increment index in while loop
body: <p>I have a code which displays a circle and an ellipse  when I press "S" (the positions are chosen among 18 possible combinations). Then I have a while loop: I would like that, at every iteration, if the circle is touched a new position is generated right away and, if the circle is NOT touched for 3 consecutive times, a new position is generated. </p>
  
  <p>I have 2 problems: 1) It seems that I cannot put the increment (positions ++) in the if/else statement only. 2) The second iteration  does not update the positions of circle and ellipse (I should use a jQuery $ attribute?)</p>
  
  <p>How can I solve this?</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
  
    &lt;link rel="stylesheet" href="cssFiles/blackBackground.css"&gt;
  
    &lt;script src="jsFiles/drawEllipse.js"&gt;&lt;/script&gt; 
    &lt;script src="jsFiles/drawCircle.js"&gt;&lt;/script&gt; 
    &lt;script src="jsFiles/newPosition.js"&gt;&lt;/script&gt; 
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src='https://code.responsivevoice.org/responsivevoice.js'&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  
  
  
    &lt;canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"&gt;&lt;/canvas&gt;
    &lt;p id="1"&gt;&lt;/p&gt;
    &lt;p id="2"&gt;&lt;/p&gt;
  
      &lt;script&gt;
      var ellipse = [[-150,-300],[-150,0],[-150,300],[150,-300],[150,0],[150,300]];
      var circle = [[-350,-300],[-350,0],[-350,300],[350,-300],[350,0],[350,300]];
      var radius = 95;
      var positions = 0; 
      var clicks  = 0;   
      var canvas = document.getElementById('myCanvas');
      $(document).ready(function() {
          document.addEventListener("keydown", function (e) {
  
  
          if  (e.keyCode === 83) { // "Start" is pressed
                  while (positions&lt;6){  
               // generate first position      
                  var idx = newPosition(ellipse,circle,radius)
                  var idx_ellipse = idx[0];
                  var idx_circle = idx[1];
                  var xRight = circle[idx_circle][0] + radius + canvas.width/2 ;
                  var xLeft = circle[idx_circle][0] - radius+ canvas.width/2;
                  var yTop = circle[idx_circle][1] - radius + canvas.height/2;
                  var yBottom = circle[idx_circle][1] + radius + canvas.height/2;
  
  
                  document.addEventListener("click", function(e) {
                    clicks++;
  
                   if (e.clientX&lt; xRight &amp;&amp; e.clientX&gt; xLeft &amp;&amp; e.clientY&lt; yBottom &amp;&amp; e.clientY&gt; yTop) { //circle is correctly touched
                        var idx = newPosition(ellipse,circle,radius) // new position generated
                        positions++
  
                    }
                    else if (clicks &gt; 3) {
                      var idx = newPosition(ellipse,circle,radius) // new position generated
                      positions++
                    }
  
               }, false); //end of touch listener 
  
                 } // end of while loop 
              } // end of "Start" keycode listener  
          }); //end of keydown listener
  
        }) //end of document function
  
   function newPosition(ellipse,circle,radius){
                   var idx_ellipse = Math.floor( Math.random() *6);
                  drawEllipse(ellipse[idx_ellipse][0],ellipse[idx_ellipse][1],radius,2.5,1);
                  // Check position of ellipse and draw circle on the other side
                  if (ellipse[idx_ellipse][0] == -150){
                    var idx_circle = Math.floor(Math.random() * (5 - 3 +1)) + 3;
                    drawCircle(circle[idx_circle][0],circle[idx_circle][1],radius,2.5,1);
                  }
                  else if(ellipse[idx_ellipse][0] == 150) {
                    var idx_circle = Math.floor(Math.random() * (2 - 0 +1)) + 0;
                    drawCircle(circle[idx_circle][0],circle[idx_circle][1],radius,2.5,1);
                  }  
  
                     return [idx_ellipse,idx_circle];
                  } 
      &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;      
  </code></pre>