jquery - Duplicated button doesnt change its text -



jquery - Duplicated button doesnt change its text -

i implementing tic tac toe game special specification when press button open new div of game , disable old 1 , button pressed must changed in both div , on when click button alter original div not 1 want updated help ? in adance.

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style type="text/css"> .xo { font-family: arial, helvetica, sans-serif; font-size: 15px; background-color: #f03; height: 300px; width: 310px; text-transform: capitalize; } .btn { background-color: #0c9; height: 100px; width: 100px; } </style> <script> var c = new number(); c=0; i=0; var toplay = 0; var name = "xo"+c; $(document).ready(function() { $(document).on('click','.btn',function(){ alert(name); var id = event.target.id; if(c%2===0){ $("#"+id).attr("value","x"); $("#"+id).attr("disabled", "disabled"); } else if(c%2!==0){ $("#"+id).attr("value","o"); $("#"+id).attr("disabled", "disabled"); } newdiv = document.createelement("div"); newdiv.classname="xo"; var $copy =$("#"+name).html(); document.getelementbyid(name).appendchild(newdiv); var allchildnodes = document.getelementbyid(name).getelementsbytagname('*'); for(var = 0; < allchildnodes.length; i++) { allchildnodes[i].disabled = true; } c++; name = "xo"+c; alert(name); newdiv.id=name; toplay++; $("#"+name).html($copy); }); }); </script> </head> <body> <div class="xo" id="xo0"> <input type="submit" class="btn" name="1" id="1" value="submit" /> <input type="submit" class="btn" name="2" id="2" value="submit" /> <input type="submit" name="3" class="btn" id="3" value="submit" /> <input type="submit" name="3" class="btn" id="4" value="submit" /> <input type="submit" name="3" class="btn" id="5" value="submit" /> <input type="submit" name="3" class="btn" id="6" value="submit" /> <input type="submit" name="3" class="btn" id="7" value="submit" /> <input type="submit" name="3" class="btn" id="8" value="submit" /> <input type="submit" name="3" class="btn" id="9" value="submit" /> <br></br> </div> </body> </html>

the problem duplicate ids. id's must unique utilize classes instead.

jquery

var id = this.id; if (c % 2 === 0) { $("." + id).val("x"); $("." + id).prop("disabled", true); } else if (c % 2 !== 0) { $("." + id).val("o"); $("." + id).prop("disabled", true); }

html

<input type="submit" class="btn 1" name="1" id="1" value="submit" /> <input type="submit" class="btn 2" name="2" id="2" value="submit" /> <input type="submit" name="3" class="btn 3" id="3" value="submit" /> <input type="submit" name="3" class="btn 4" id="4" value="submit" /> <input type="submit" name="3" class="btn 5" id="5" value="submit" /> <input type="submit" name="3" class="btn 6" id="6" value="submit" /> <input type="submit" name="3" class="btn 7" id="7" value="submit" /> <input type="submit" name="3" class="btn 8" id="8" value="submit" /> <input type="submit" name="3" class="btn 9" id="9" value="submit" />

demo

jquery html css jscript

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -