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

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -