title: How to put a break in a for loop from continuing to the line until user submits form (Javascript)
body: <p>I am trying to make an experiment where I have a set of images that I want to show in sequence and ask the user to answer what they think the image is depicting. In order to do this, I am using a for loop in Javascript in an HTML file that will loop the number of times of the number of images. I am trying to get the loop wait to continue to the next line of code until the user submits the form, and I'm not really sure how to do that.</p>
  
  <p>I have tried using the While true loop, which contains a setTimeout function to check if the user submitted the form, in the parent for loop. I have also tried adding event handlers to check if the form was submitted, but the loop does not wait to continue to the next line like I would like it to.</p>
  
  <pre><code>var data = new FormData();
              var createform = document.getElementById('usrInpt');
              var imageNames = new Array("practiceImages/RiseFrame01.jpg","practiceImages/RiseFrame02.jpg","practiceImages/RiseFrame03.jpg","practiceImages/RiseFrame04.jpg","practiceImages/RiseFrame05.jpg","practiceImages/RiseFrame06.jpg","practiceImages/RiseFrame07.jpg","practiceImages/RiseFrame08.jpg","practiceImages/RiseFrame09.jpg","practiceImages/RiseFrame10.jpg") // This is the array of images
              function happyData() {
                      console.log("in happydata")
                      buttonPressed = true
                      //var newImageName = document.getElementById('imgName');
                      //newImageName.parentNode.removeChild(newImageName);
                      //var hiddenElementJS = document.getElementById('hiddenElement');
                      //hiddenElementJS.parentNode.removeChild(hiddenElementJS)
                      //submissionName.setAttribute("value", "")
              }
              for (i = 0; i&lt;10; i++) {
                  console.log(i)
                  var buttonPressed = false;
                  var hiddenElement = document.createElement('input');
                  hiddenElement.setAttribute("type", "hidden");
                  hiddenElement.setAttribute("id", "hiddenElement");
                  hiddenElement.setAttribute("name", "imageName");
                  var currentImageStr = imageNames[i]
                  var fields = currentImageStr.split('/')
                  console.log(fields[1])
                  hiddenElement.setAttribute("value", fields[1])
                  createform.appendChild(hiddenElement)
                  var y = document.getElementById("imageDisplay");
                  var newImage = document.createElement('img');
                  newImage.setAttribute("id", "imgName");
                  newImage.setAttribute("src",imageNames[i]);
                  newImage.setAttribute("width", "30%")
                  newImage.setAttribute("height", "50%")
                  newImage.setAttribute("max-width","30%");
                  newImage.setAttribute("max-height","50%");
                  y.appendChild(newImage);
                  var Hisubmit = document.getElementById('submit');
                  console.log(i)
  
                  // THIS IS WHERE I WOULD LIKE IT TO PAUSE UNTIL THE USER SUBMITS THE FORM
  
                  console.log(i)
              }
  </code></pre>
  
  <p>Using the code above, it should print out all 10 images on the webpage, including the text box for responses.</p>