Форум

Alanslob · #1 (**permalink**) 28.10.2020, 10:21

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 срабатывает, а если я пробую сравнивать с переменной ничего не происходит, не могу разобраться почему

рони · #2 (**permalink**) 28.10.2020, 10:37

Сообщение от Alanslob

а если я пробую сравнивать с переменной ничего не происходит

то что вы послали в элемент, браузер записал в нужном ему формате, поэтому переменная не равна содержимому элемента. используйте class для сравнения.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Alanslob · #3 (**permalink**) 28.10.2020, 11:01

я можно сказать совсем новичек, могли бы вы показать на примере моей функции каким образом я должен class использовать?

рони · #4 (**permalink**) 28.10.2020, 14:38

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>

Alanslob · #5 (**permalink**) 29.10.2020, 03:14

Низкий поклон тебе добрый человек!)))

Форум

Справочник

Discord чат

Курсы javascript