javascript - character selction option for the players in tic-tac-toe -

javascript - character selction option for the players in tic-tac-toe -

i have made tic-tac-toe game.for have create character selection module each player.players have take between x , o.if first 1 selects 'o' ,other player can not select that.he has take 'x'.but including html lines ,the code have written 50 lines , fragile, can't find other way shorten code.selection alternative basic thing in games.any expert solution on matter appreciated

class="snippet-code-js lang-js prettyprint-override">function player(name,val){ this.name=name; this.val=val; } var ps=document.getelementbyid('ps'); ps.addeventlistener('click',function(e){ player1=prompt('input player1'); char1=prompt('input char between x/o'); if((char1 != 'x') && (char1 != 'o')){ for(;;){ alert('select between x o please'); char1=prompt('between x/o'); if((char1 === 'x')|| (char1 === 'o')){ break; } } } player2 = prompt('input player2'); char2 = prompt('input char o/x'); if((char2 === char1) || ((char2 != 'x') && (char2 != 'o'))){ for(;;){ alert('you can not have char'); char2=prompt('try again'); if(((char2 === 'o') || (char2 === 'x')) && (char2 != char1)){ break; } } } p1=new player(player1,char1); p2=new player(player2,char2); document.body.innerhtml+='\n'+p1.name+' : '+p1.val+'\n'+p2.name+' : '+p2.val; }); class="snippet-code-html lang-html prettyprint-override"><input type='button' value='player setup' id='ps'>

instead of using prompt, improve create utilize of html <input> elements.

demo on fiddle html: <div class="container"> <div class="p1"> <label>player 1:</label> <input id="p1" type="text" /> <br /> <br /> <label>choose character:</label> <br /> <input class="charac" type="radio" name="characp1" value="x" /> <label class="charac">x</label> <br /> <input class="charac" type="radio" name="characp1" value="o" /> <label class="charac">o</label> </div> <div class="p2"> <label>player 2:</label> <input id="p2" type="text" /> <br /> <br /> <label>choose character:</label> <br /> <input class="charac cp2" type="radio" name="characp2" value="x" /> <label class="charac">x</label> <br /> <input class="charac cp2" type="radio" name="characp2" value="o" /> <label class="charac">o</label> </div> <div class="btncontainer"> <input id="btn" class="btn" type="button" value="submit" /> </div> <div id="message"></div> </div> javascript: var ps = document.getelementbyid('btn'); var c1 = document.getelementsbyname('characp1'); var c2 = document.getelementsbyname('characp2'); var msg = document.getelementbyid('message'); var char1; var char2; function player(name, val) { this.name = name; this.val = val; } (i = 0; < c1.length; i++) { c1[i].addeventlistener('change', function () { if (this.checked) { this.value == 'x' ? c2[1].checked = true : c2[0].checked = true; char1 = this.value; char2 = this.value == 'x' ? 'o' : 'x'; } }); } (i = 0; < c2.length; i++) { c2[i].addeventlistener('change', function () { if (this.checked) { this.value == 'x' ? c1[1].checked = true : c1[0].checked = true; char2 = this.value char1 = this.value == 'x' ? 'o' : 'x'; } }); } ps.addeventlistener('click', function () { var player1 = document.getelementbyid('p1').value; var player2 = document.getelementbyid('p2').value; p1 = new player(player1, char1); p2 = new player(player2, char2); if (p1.name && p1.val && p2.name && p2.val) { msg.innerhtml = p1.name + ' : ' + p1.val + '<br />' + p2.name + ' : ' + p2.val; } else { msg.innerhtml = 'please fill input fields' } }); css: .charac { position: relative; left: 0px; } .container { width: 250px; margin: 0 auto; } .p1, .p2, #message { width: 100%; height: 100%; border: 4px solid #51634b; border-radius: 10px; padding: 10px; margin: 10px; } #message { text-align: center; border: none; } .btncontainer { padding: 10px; margin-left: 40px; } input.charac { position: relative; top: 3px; } input[type=text] { height: 25px; background: transparent; border-radius: 6px; outline: none; color: #51634b; font-size: 12px; border: 1px solid #51634b; margin-left: 5px; padding: 2px; text-align: center; } input[type=text]:focus { box-shadow: 0px 0px 4px #62745c; } input[type=radio] { cursor: pointer; } body { background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png) repeat black; } label { color: #51634b; } #message { color: #51634b; font-size: 15px; } .btn { display: block; width: 120px; height: 30px; background-color: transparent; color: black; border: 2px solid #51634b; border-radius: 5px; cursor: pointer; color: #51634b; font-size: 15px; margin: 15px; margin: 0 auto; } .btn::-moz-focus-inner { border: 0; } .btn:hover { -webkit-animation: btn 0.5s 1; -moz-animation: btn 0.5s 1; -o-animation: btn 0.5s 1; animation: btn 0.5s 1; background-color: #51634b; color: #000000; } input.btn:active { padding: 0; } @-webkit-keyframes btn { { background-color: transparent; color: #51634b; } { background-color:#51634b; color: #000000; } } @-moz-keyframes btn { { background-color: transparent; color: #51634b; } { background-color:#51634b; color: #000000; } } @-o-keyframes btn { { background-color: transparent; color: #51634b; } { background-color:#51634b; color: #000000; } } @keyframes btn { { background-color: transparent; color: #51634b; } { background-color:#51634b; color: #000000; } }

javascript tic-tac-toe