Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.10.2020, 10:21
Новичок на форуме
Отправить личное сообщение для Alanslob Посмотреть профиль Найти все сообщения от Alanslob
 
Регистрация: 28.10.2020
Сообщений: 3

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

Последний раз редактировалось Alanslob, 28.10.2020 в 10:59.
Ответить с цитированием
  #2 (permalink)  
Старый 28.10.2020, 10:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,248

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 28.10.2020, 11:01
Новичок на форуме
Отправить личное сообщение для Alanslob Посмотреть профиль Найти все сообщения от Alanslob
 
Регистрация: 28.10.2020
Сообщений: 3

я можно сказать совсем новичек, могли бы вы показать на примере моей функции каким образом я должен class использовать?
Ответить с цитированием
  #4 (permalink)  
Старый 28.10.2020, 14:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,248

крестики нолики 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>
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2020, 03:14
Новичок на форуме
Отправить личное сообщение для Alanslob Посмотреть профиль Найти все сообщения от Alanslob
 
Регистрация: 28.10.2020
Сообщений: 3

Низкий поклон тебе добрый человек!)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция при нажатии срабатывает один раз и больше не работает notOldFagFromRussia Общие вопросы Javascript 3 08.11.2018 19:17
Почему не срабатывает функция внутри функции? Conus Элементы интерфейса 1 17.04.2016 16:50
Почему срабатывает именно эта функция? borus jQuery 2 14.12.2015 14:14
Функция назначенная обработчику события срабатывает сразу Velidan Общие вопросы Javascript 9 18.02.2015 17:02
Почему функция срабатывает один раз? Bogdan808 Javascript под браузер 4 06.09.2010 23:41