здравствуйте,я новичок нужна помощ...
я пишу крестики нолики на js, установил onfocus и onblur на элемент div,после фокуса на него появляются 2 блока с картинкой X и O,при клике на одного из них div получает картику,но когда я ставлю onblur на этот div для скрытия двух блоков картинок,почему то перестайт действовать функция для смены картинки div-а...
заранее спасибо за помощь
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style/style.css" type="text/css" rel="stylesheet">
<!-- <meta http-equiv="refresh" content="1"> -->
<title>X & O</title>
</head>
<body> <!-- onclick="assign(this)" -->
<ul>
<li>
<div tabindex="">
<img />
<p>
<button><img src="images/x.png"></button>
<button><img src="images/o.png"></button>
</p>
</div>
<div tabindex="">
<img />
<p>
<button><img src="images/x.png"></button>
<button><img src="images/o.png"></button>
</p>
</div>
<div tabindex="">
<img />
<p>
<button><img src="images/x.png"></button>
<button><img src="images/o.png"></button>
</p>
</div>
</li>
</ul>
<script type="text/javascript" src="script/script.js"></script>
</body>
</html>
var field=document.getElementsByTagName("div");
for(var i=0;i<field.length;i++){
field[i].onfocus=function(){
var x_o = this.getElementsByTagName("button");
for (var j = 0; j < x_o.length; j++) {
x_o[j].style.display = "block";
x_o[j].onclick=function(){
var image = this.getElementsByTagName("img")[0].src;
this.parentNode.parentNode.getElementsByTagName("img")[0].src = image;
this.parentNode.style.display="none";
}
}
}
field[i].onblur=function(){
var x_o = this.getElementsByTagName("button");
for (var j = 0; j < x_o.length; j++) {
x_o[j].style.display = "none";
}
};
};