Привет ребят! Недавно начал изучать js и решил попрактиковаться и создать игру крестики нолики. Получился вот такой код:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>[css]
* {
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;
}[/css]
</style>
<script>[JS]
var counter = 0;
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;
}
[/JS]
</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>
Но он не работает. Не могли бы вы мне подсказать в чём проблема?
P.S. В консоли выводится "example.html:60 Uncaught TypeError: Cannot read property 'indexOf' of undefined
at HTMLTableCellElement.showAnswer".