javascript - Objects in div connected dynamically using div ID -
the first input creates loop called enter # of circles creates multiple divs. each div contains circle , input object.
the input color supposed change color of circle within same div using id pulled out of divid.
the id pulled out of loop yet doesn't seem working because of event listener nothing seems work.
any clue of being done wrong?
<!doctype html> <head> <title>bins status</title> <style> div { width: 120px; height: 120px; display: inline-block; margin-left: 1px; } </style> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type="text/javascript" src="script.js"></script> </head> <body> <br> <b>enter # of circles<b> <br> <input type="integer" id="circles"> </b></b> <form> <div id="participentfieldwrap"> <svg height="100" width="200"> <line x1="0" y1="50" x2="100000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" /> <svg height="100" width="100"> <circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" /> </svg> </svg> <br> <b>color<b> <br> <input type="integer" id="color"> </b></b> <script> //inputing integer 1, 2 or 3 instantly applies color formatting (rgb) circle in same div var cir = document.getelementbyid("cir"); var = document.getelementbyid("color"); into.addeventlistener("keyup", myfunction, false); function myfunction() { if(document.getelementbyid("color").value == 1) cir.style.fill = "green"; else if(document.getelementbyid("color").value == 2) cir.style.fill = "red"; else if(document.getelementbyid("color").value == 3) cir.style.fill = "blue"; else cir.style.fill = "yellow"; } </script> </div> </form> <script type="text/javascript"> //loop creating multiple divs in form using limit set in integer input var participantsfield = document.getelementbyid("participentfieldwrap"), form = document.getelementsbytagname("form")[0], contestantnum = document.getelementbyid("circles"), i, timer; function createcircles(val) { // removing previous circles while (form.firstchild) { form.removechild(form.firstchild); } for(i = 0; < val; i++) { var clone = participantsfield.clonenode(true); clone.id = "participentfieldwrap_" + i; clone.queryselector("input").id = "color_" + i; clone.queryselector("circle").id = "cir_" + i; form.appendchild(clone); } } contestantnum.addeventlistener('keydown', function(e) { if(timer) { cleartimeout(timer); } timer = settimeout(function() { createcircles(contestantnum.value); }, 800); }); </script> </body> </html>
the problem function calls id "cir" , "color" , when create circles id "cir_0" , "color_0". problem new elements in dom not activate functions launched when page loads.
i not know how pure javascript here leave solution jquery.
greetings mexico.
Comments
Post a Comment