javascript - Variable won't update out of function -
something going wrong code, title implies.
this code matching game, separate document 2 (nodes) , generate smiley faces randomly on 1 side, clone other side. remove last child(face) on rhs user has click on smiley on lhs of page next level, @ point 5 smileys added increase difficulty. user supposed click on smiley left pass next level.
everything works except adding of smileys. problem when goes next level, resets number of faces 5(or whatever number set below same commented text) reason!
<!doctype html> <html> <head> <style> img {position:absolute;} /*here tried use 500px in style rules div division noticeably off centre, therefore, used 50% instead*/ div {position:absolute; width:50%; height:50%} #rightside {left:50%; border-left: 1px solid black} </style> </head> <body onload="generatefaces()"> <h1 id="titleofgame">matching game!</h1> <p id="intructions">to play game, find smiley on left hand side , click on :)</p> <div id="leftside"> <!--this div node display of faces on left side of screen faces dynamically added using javascript--> </div> <div id="rightside"> <!--this div node display of faces on right side of screen clonenode(true) used copy faces right side, , last child of branch deleted, such there more faces on left side. --> </div> <script> //this part of script generates 5 faces randomly placed on left side of screen var numberoffaces=5; var theleftside = document.getelementbyid("leftside"); var i=0; var thebody=document.getelementsbytagname("body")[0]; function generatefaces(){ while (i<numberoffaces){ var random_top=((math.random()*400)); var random_left=((math.random()*400)); var random_top=math.floor(random_top); var random_left=math.floor(random_left); var img=document.createelement('img'); img.src="smile.png"; img.style.left=random_left+"px"; img.style.top=random_top+"px"; theleftside.appendchild(img); i+=1; //this part of script clones 5 faces onto right side of page. var therightside=document.getelementbyid("rightside"); var leftsideimages = theleftside.clonenode(true); } therightside.appendchild(leftsideimages); leftsideimages=leftsideimages.removechild(leftsideimages.lastchild); theleftside.lastchild.onclick=function nextlevel(event) { event.stoppropagation(); while (theleftside.firstchild) { theleftside.removechild(theleftside.firstchild); } while (therightside.firstchild) { therightside.removechild(therightside.firstchild); } numberoffaces++; //ok problem when goes next level, resets numberoffaces 5(or whatever number set here) reason! numberoffaces++; //adding manually gives same result x+=5. ie. variable not being updated, being reset. numberoffaces++; numberoffaces++; generatefaces(); }; thebody.onclick=function youfail() { alert("game over!"); thebody.onclick=null; theleftside.lastchild.onclick=null; }; }; </script> </body> </html> there no error flagged console..
try resetting i variable 0 inside generatefaces function. add counter variable in generatefaces function unless reset never add additional faces.
//this part of script generates 5 faces randomly placed on left side of screen var numberoffaces=5; var theleftside = document.getelementbyid("leftside"); var i=0; var thebody=document.getelementsbytagname("body")[0]; function generatefaces(){ = 0; while (i<numberoffaces){ var random_top=((math.random()*400)); var random_left=((math.random()*400)); var random_top=math.floor(random_top); var random_left=math.floor(random_left); var img=document.createelement('img'); img.src="smile.png"; img.style.left=random_left+"px"; img.style.top=random_top+"px"; theleftside.appendchild(img); i+=1; //this part of script clones 5 faces onto right side of page. var therightside=document.getelementbyid("rightside"); var leftsideimages = theleftside.clonenode(true); } therightside.appendchild(leftsideimages); leftsideimages=leftsideimages.removechild(leftsideimages.lastchild); theleftside.lastchild.onclick=function nextlevel(event) { event.stoppropagation(); while (theleftside.firstchild) { theleftside.removechild(theleftside.firstchild); } while (therightside.firstchild) { therightside.removechild(therightside.firstchild); } numberoffaces++; //ok problem when goes next level, resets numberoffaces 5(or whatever number set here) reason! numberoffaces++; //adding manually gives same result x+=5. ie. variable not being updated, being reset. numberoffaces++; numberoffaces++; generatefaces(); }; thebody.onclick=function youfail() { alert("game over!"); thebody.onclick=null; theleftside.lastchild.onclick=null; }; };img {position:absolute;} /*here tried use 500px in style rules div division noticeably off centre, therefore, used 50% instead*/ div {position:absolute; width:50%; height:50%} #rightside {left:50%; border-left: 1px solid black}<body onload="generatefaces()"> <h1 id="titleofgame">matching game!</h1> <p id="intructions">to play game, find smiley on left hand side , click on :)</p> <div id="leftside"> <!--this div node display of faces on left side of screen faces dynamically added using javascript--> </div> <div id="rightside"> <!--this div node display of faces on right side of screen clonenode(true) used copy faces right side, , last child of branch deleted, such there more faces on left side. --> </div> </body>
Comments
Post a Comment