Не срабатывает функция
let area = document.getElementById('area'),
move = 0;
let x = "<img src='1.png' width = '90' height = '90'>";
let o = "<img src='2.png' width = '90' height = '90'>";
area.addEventListener('click',function(event){
if(move % 2 === 0){
event.target.innerHTML = x;
}else {
event.target.innerHTML = 'O';
}
move++;
check();
});
function check(){
let boxes = document.getElementsByClassName('box');
let arr = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
]
for (let i = 0; i < arr.length; i++){
if(boxes[arr[i][0]].innerHTML === x && boxes[arr[i][1]].innerHTML === x && boxes[arr[i][2]].innerHTML === x){
alert('Победили крестики!');
location.reload();
}else if(boxes[arr[i][0]].innerHTML === 'O' && boxes[arr[i][1]].innerHTML === 'O' && boxes[arr[i][2]].innerHTML === 'O'){
alert('Победили нолики!');
location.reload();
}
}
}
function check(){
let boxes = document.getElementsByClassName('box');
let arr = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
]
for (let i = 0; i < arr.length; i++){
if(boxes[arr[i][0]].innerHTML === x && boxes[arr[i][1]].innerHTML === x && boxes[arr[i][2]].innerHTML === x){
alert('Победили крестики!');
location.reload();
}else if(boxes[arr[i][0]].innerHTML === 'O' && boxes[arr[i][1]].innerHTML === 'O' && boxes[arr[i][2]].innerHTML === 'O'){
alert('Победили нолики!');
location.reload();
}
}
}
Если в ноликах я подставляю просто букву 'O' то идет сравнение и alert срабатывает, а если я пробую сравнивать с переменной ничего не происходит, не могу разобраться почему:cray: |
Цитата:
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
я можно сказать совсем новичек, могли бы вы показать на примере моей функции каким образом я должен class использовать?
|
крестики нолики class
Alanslob,
в css вместо content можно использовать background-image.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 90px;
height: 90px;
line-height: 70px;
border: 1px solid #000000;
box-sizing: border-box;
font-size: 90px;
text-align: center;
}
.box.x:after{
content: "x";
}
.box.o:after{
content: "o";
}
#area{
width: 270px;
display: flex;
flex-wrap: wrap
}
</style>
</head>
<body>
<div id="area">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script>
let area = document.getElementById('area'),
move = 0;
area.addEventListener('click', function(event) {
if (move % 2 === 0) {
event.target.classList.add('x');
} else {
event.target.classList.add('o');
}
move++;
check();
});
function check() {
let boxes = document.querySelectorAll('.box');
let arr = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
for (let [a, b, c] of arr) {
if (boxes[a].classList.contains('x') && boxes[b].classList.contains('x') && boxes[c].classList.contains('x')) {
win('Победили крестики!');
break;
} else if (boxes[a].classList.contains('o') && boxes[b].classList.contains('o') && boxes[c].classList.contains('o')) {
win('Победили нолики!');
break;
}
}
}
const win = str => setTimeout(() => {
alert(str);
location.reload();
});
</script>
</body>
</html>
|
Низкий поклон тебе добрый человек!)))
|
| Часовой пояс GMT +3, время: 08:06. |