Javascript: Image does not get updated immediately -


i'm trying learn javascript book head first javascript (morrison).

inside function findseat(), code supposed update image 'seat_select.png' every seat available , ask confirmation.

however, when run code, images updated (as expected) sometimes. otherwise, images updated after loop has completed.

why happening?

    <html>     <head>     <title>movie ticket finder</title>      <script type="text/javascript">         var seats = [ false, true, false, true, true, true, false, true, false ];         var selseat = -1;          function initseats() {             // initialize appearance of seats             (var = 0; < seats.length; i++) {                 if (seats[i]) {                     // set seat available                     document.getelementbyid("seat" + i).src = "seat_avail.png";                     document.getelementbyid("seat" + i).alt = "available seat";                 }                 else {                     // set seat unavailable                     document.getelementbyid("seat" + i).src = "seat_unavail.png";                     document.getelementbyid("seat" + i).alt = "unavailable seat";                 }             }         }          function findseat() {             // if seat selected, reinitialize seats clear them             if (selseat >= 0) {                 selseat = -1;                 initseats();             }              // search through seats availability             (var = 0; < seats.length; i++) {                 // see if current seat available                 if (seats[i]) {                     // set seat selection , update appearance of seat                     selseat = i;                     document.getelementbyid("seat" + i).src = "seat_select.png";                     document.getelementbyid("seat" + i).alt = "your seat";                      // prompt user accept seat                     var accept = confirm("seat " + (i + 1) + " available. accept?");                     if (!accept) {                         // user rejected seat, clear seat selection , keep looking                         selseat = -1;                         document.getelementbyid("seat" + i).src = "seat_avail.png";                         document.getelementbyid("seat" + i).alt = "available seat";                     }                 }             }         }     </script> </head>  <body onload="initseats();">     <div style="margin-top:75px; text-align:center">         <img id="seat0" src="" alt="" />         <img id="seat1" src="" alt="" />         <img id="seat2" src="" alt="" />         <img id="seat3" src="" alt="" />         <img id="seat4" src="" alt="" />         <img id="seat5" src="" alt="" />         <img id="seat6" src="" alt="" />         <img id="seat7" src="" alt="" />         <img id="seat8" src="" alt="" /><br />         <input type="button" id="findseat" value="find seat" onclick="findseat();" />     </div> </body> </html>

edit: based on oleg yudovich's answer, added code. works expected!

  <div style="display: none">       <img id="seat_unavail" src="seat_unavail.png" alt="" />       <img id="seat_avail" src="seat_avail.png" alt="" />       <img id="seat_select" src="seat_select.png" alt="" />   </div>

once include new image in html, browser download image , put cache, before displaying.this process take time. if images big size, take more time. can solve problem caching images before loop start running : 

 <div style="display:none;">      <img id="seat0" src="some image source" alt=""/>      <img id="seat0" src="some image source" alt=""/>      <img id="seat0" src="some image source" alt=""/>      <img id="seat0" src="some image source" alt=""/>      <img id="seat0" src="some image source" alt=""/>      <img id="seat0" src="some image source" alt=""/>  </div>

this hidden block,if put him on site start page, load images browser cache.


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more