javascript - making parallel ajax requests -

i have javascript code these things in loop

1. create div element,append dom , reference
2. pass reference function makes ajax post request
3. set response of ajax request innerhtml of passed element reference

here code

window.onload = function () {     var categories = document.getelementbyid('categories').children;     (i = 0; < categories.length; i++) {         var link = categories[i].children[1].children[0].attributes['href'].nodevalue;         var div = document.createelement('div');         div.classname = "books";         div.style.display = "none";         categories[i].appendchild(div);         getlinks(link, div);     } }  function getlinks(url, div) {     xhr = new xmlhttprequest();     xhr.open('post', 'ebook_catg.php', true);     xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded');     url = encodeuricomponent(url)     var post = "url=" + url;     xhr.node=div;                         //in response marc b's suggestion     xhr.onreadystatechange = function () {         if (xhr.readystate == 4) {             xhr.node.innerhtml = xhr.responsetext;             xhr.node.style.display = "block";         }     }     xhr.send(post); } 

now when check in firebug can see div element created , appended categories element , display set hidden. ajax post requests being sent , response being received expected. innerhtml property of div not set , neither display set block. means function getlinks loses div reference.

when type console.log(div) in firefox console says referenceerror: div not defined.

can explain whats going on here?

---

in response franks's comment changed readystate readystate , able attach response of last ajax request dom. makes obvious div reference being lost.

ok, you've got few globals going on don't want. rule of thumb: unless need access variable outside of function, place var in front of it. otherwise you'll have data clobbering on place:

// changed name `d` because div seems global var. function getlinks(url, d) {     // make xhr local variable won't re-written.     var request = new xmlhttprequest();     request.open('post', 'ebook_catg.php', true);     request.setrequestheader('content-type', 'application/x-www-form-urlencoded');     url = encodeuricomponent(url)     var post = "url=" + url;     request.onreadystatechange = function () {         // when request global, false until last          // request completed         if (request.readystate == 4) {             // since d exists parameter getlinks, should              // bound when onreadystatechange created.             d.innerhtml = request.responsetext;             d.style.display = "block";         }     }     request.send(post); } 

so, why did such strange, strange things? well, looks div being assigned global variable , while js should function parameter name binding, want eliminate possible problems. changed name of variable. set xhr reflect local variable var keyword. changed name request. once again, shouldn't matter -- var means variable bound scope, change harmless , since don't know else have, decided remove ambiguities. if not js, @ least reader.

note:

the important part of above answer var in front of request.