title: Javascript: Image does not get updated immediately
body: <p>I'm trying to learn Javascript from the book Head First Javascript (Morrison).</p>
  
  <p>Inside the function findSeat(), the code is supposed to update the image to 'seat_select.png' for every seat that is available and then ask for a confirmation.</p>
  
  <p>However, when I run the code, the images are updated immediately (as expected) only sometimes. Otherwise, the images are updated only after the loop has completed.</p>
  
  <p>Why is this happening?</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Movie Ticket Finder&lt;/title&gt;
  
      &lt;script type="text/javascript"&gt;
          var seats = [ false, true, false, true, true, true, false, true, false ];
          var selSeat = -1;
  
          function initSeats() {
              // Initialize the appearance of all seats
              for (var i = 0; i &lt; seats.length; i++) {
                  if (seats[i]) {
                      // Set the seat to available
                      document.getElementById("seat" + i).src = "seat_avail.png";
                      document.getElementById("seat" + i).alt = "Available seat";
                  }
                  else {
                      // Set the seat to unavailable
                      document.getElementById("seat" + i).src = "seat_unavail.png";
                      document.getElementById("seat" + i).alt = "Unavailable seat";
                  }
              }
          }
  
          function findSeat() {
              // If seat is already selected, reinitialize all seats to clear them
              if (selSeat &gt;= 0) {
                  selSeat = -1;
                  initSeats();
              }
  
              // Search through all the seats for availability
              for (var i = 0; i &lt; seats.length; i++) {
                  // See if the current seat is available
                  if (seats[i]) {
                      // Set the seat selection and update the appearance of the seat
                      selSeat = i;
                      document.getElementById("seat" + i).src = "seat_select.png";
                      document.getElementById("seat" + i).alt = "Your seat";
  
                      // Prompt the user to accept the seat
                      var accept = confirm("Seat " + (i + 1) + " is available. Accept?");
                      if (!accept) {
                          // The user rejected the seat, so clear the seat selection and keep looking
                          selSeat = -1;
                          document.getElementById("seat" + i).src = "seat_avail.png";
                          document.getElementById("seat" + i).alt = "Available seat";
                      }
                  }
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="initSeats();"&gt;
      &lt;div style="margin-top:75px; text-align:center"&gt;
          &lt;img id="seat0" src="" alt="" /&gt;
          &lt;img id="seat1" src="" alt="" /&gt;
          &lt;img id="seat2" src="" alt="" /&gt;
          &lt;img id="seat3" src="" alt="" /&gt;
          &lt;img id="seat4" src="" alt="" /&gt;
          &lt;img id="seat5" src="" alt="" /&gt;
          &lt;img id="seat6" src="" alt="" /&gt;
          &lt;img id="seat7" src="" alt="" /&gt;
          &lt;img id="seat8" src="" alt="" /&gt;&lt;br /&gt;
          &lt;input type="button" id="findseat" value="Find Seat" onclick="findSeat();" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT: Based on Oleg Yudovich's answer, this is what I added to my code. Now everything works as expected!</p>
  
  <pre><code>  &lt;div style="display: none"&gt;
        &lt;img id="seat_unavail" src="seat_unavail.png" alt="" /&gt;
        &lt;img id="seat_avail" src="seat_avail.png" alt="" /&gt;
        &lt;img id="seat_select" src="seat_select.png" alt="" /&gt;
    &lt;/div&gt;
  </code></pre>