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

Question

i have made a tic-tac-toe game.For which i have to make a character selection module for each player.Players have to choose between x and o.If first one selects 'o' ,other player can not select that.he has to choose 'x'.But including html lines ,the code i have written is almost 50 lines and very fragile, i can't find any other way to shorten this code.selection option is a basic thing in games.Any expert solution on this matter would be appreciated

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 an o please');
          char1=prompt('between x/o');
          if((char1 === 'x')|| (char1 === 'o')){
           
              break;
       }
      }
  }
  
  player2 = prompt('input player2');
  
  char2 = prompt('input your char O/X');
  if((char2 === char1) || ((char2 != 'x') && (char2 != 'o'))){
  
      for(;;){
   
       alert('you can not have this 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;
 });

<input type='button' value='Player Setup' id='ps'>

Answer 1

Instead of using prompt, its better to make use 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 your 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 your 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;
}
for (i = 0; i < 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';
        }
    });
}
for (i = 0; i < 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 all 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 {
    from {
        background-color: transparent;
        color: #51634b;
    }
    to {
        background-color:#51634b;
        color: #000000;
    }
}
@-moz-keyframes btn {
    from {
        background-color: transparent;
        color: #51634b;
    }
    to {
        background-color:#51634b;
        color: #000000;
    }
}
@-o-keyframes btn {
    from {
        background-color: transparent;
        color: #51634b;
    }
    to {
        background-color:#51634b;
        color: #000000;
    }
}
@keyframes btn {
    from {
        background-color: transparent;
        color: #51634b;
    }
    to {
        background-color:#51634b;
        color: #000000;
    }
}