javascript - onclick event not running, code sequence not correct -
the code below runs far alert("click on image on left") nothing upon clicking on image added left div. upon clicking on image (id="extraimage") js change color of "extraimage" element red. also, need change sequence in code executed , run alert("click on image on left") after pictures have been added. thoughts appreciated.
<html> <head> </head> <body> <div id="containerleft"> </div> <div id="containerright"> </div> <script> var = 1 var pocetsmilikov = prompt("enter number of smiley faces"); alert("i add" + pocetsmilikov); while (i <= pocetsmilikov) { insert(); i++; } insertextratoleft(); function insert() { var imgdestination = document.getelementbyid("containerright"); var imgadded = document.createelement("img"); imgadded.src = "smiley.png"; imgdestination.appendchild(imgadded); var left = math.floor((math.random() * 50) + 1) + "px"; var top = math.floor((math.random() * 50) + 1) + "px"; var imagestyle = imgadded.style; imagestyle.position = "relative"; imagestyle.top = top; imagestyle.left = left; var the_node = document.getelementbyid("containerright").lastchild; var the_clone = the_node.clonenode(true); document.getelementbyid("containerleft").appendchild(the_clone); } function insertextratoleft() { var imgdestinationextra = document.getelementbyid("containerleft"); var imgaddedextra = document.createelement("img"); imgaddedextra.src = "smiley.png"; imgaddedextra.id = "extraimage" imgdestinationextra.appendchild(imgaddedextra); var left = math.floor((math.random() * 50) + 1) + "px"; var top = math.floor((math.random() * 50) + 1) + "px"; var imagestyle = imgaddedextra.style; imagestyle.position = "relative"; imagestyle.top = top; imagestyle.left = left; } alert("click on image on left"); extraimage.onclick = extraimgfound(); function extraimgfound() { document.getelementbyid("extraimage").style.color = "red"; } </script> </body> </html>
extraimage
not defined anywhere. add imgaddedextra.onclick = extraimgfound();
in insertextratoleft()
function.
try:
function insertextratoleft() { var imgdestinationextra = document.getelementbyid("containerleft"); var imgaddedextra = document.createelement("img"); imgaddedextra.src = "smiley.png"; imgaddedextra.id ="extraimage" imgdestinationextra.appendchild(imgaddedextra); imgaddedextra.onclick = extraimgfound(); var left = math.floor((math.random() * 50) + 1)+"px"; var top = math.floor((math.random() * 50) + 1)+"px"; var imagestyle = imgaddedextra.style; imagestyle.position = "relative"; imagestyle.top = top; imagestyle.left = left; }
Comments
Post a Comment