BIOkefirchik,
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<style>
* {
margin: 0px;
padding: 0px;
}
#body {
width: 150px;
height: 270px;
border: 1px solid red;
padding: 5px;
margin: 50px 0px 0px 300px;
}
td {
width:50px;
height: 50px;
border: 1px solid black;
font-size: 35px;
text-align: center;
}
#WhoseTurn {
width: inherit;
height: 35px;
font-size: 25px;
border: 1px solid blue;
font-variant: small-caps;
text-align: center;
padding-top: 15px;
}
#messageArea {
width: inherit;
height:35px;
border: 1px solid blue;
text-align: center;
font-size: 25px;
padding-top: 15px;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<script>
window.onload = init;
function init() {
var model = {
locations: ["00", "01", "02", "10", "11", "12", "20", "21", "22"],
hits: ["", "", "", "", "", "", "", "", ""],
counter: 0,
showAnswer: function(eventObj) {
var obj = eventObj.target;
var id= obj.getAttribute("id");
console.log(obj.id);
var index = this.locations.indexOf(obj.id);
this.counter++;
if(this.counter%2==0){
this.hits[index] = "o";
obj.innerHTML = "o";
}else {
this.hits[index] = "x";
obj.innerHTML = "x";
}
}
};
var tds = document.getElementsByTagName("td");
for(var i=0; i < tds.length; i++)
tds[i].onclick = model.showAnswer.bind(model);
}
</script>
</head>
<body>
<div id = "body">
<div id = "messageArea"></div>
<table>
<tr>
<td id = "00"></td><td id = "01"></td><td id="02"></td>
</tr>
<tr>
<td id = "10"></td><td id = "11"></td><td id="12"></td>
</tr>
<tr>
<td id = "20"></td><td id = "21"></td><td id="22"></td>
</tr>
</table>
<div id="WhoseTurn"></div>
</div>
</body>
</html>