Крестики нолики

@OlegPL · Регистрация: 22.10.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте, не могу установить массиву ячеек каждое взаимодействие onclick. Вот код...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Крестики-нолики</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <button id="start">Начать игру!</button>
        <table id="myTable">
            <tbody>
                <tr>
                    <td></td><td></td><td></td>
                </tr>
                <tr>
                    <td></td><td></td><td></td>
                </tr>
                                 <tr>
                    <td></td><td></td><td></td>
                </tr>
            </tbody>
        </table>
        <script src="script.js" type="text/javascript"></script>
    </body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
* {
    margin: 0px;
    padding: 0px;
}
#start {
    width: 150px;
    height: 50px;
    font-size: 20px;
    position: absolute;
    color: #fff;
    text-shadow: 0 -1px 1px #777;
    border: 2px solid #F64C2B;
    border-radius: 5px;
    box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;
    background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
#start:active {
    top: 1px;
    left: 1px;
    box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset;
    background: linear-gradient(#FB9575, #F45A38 48%, #EA1502 52%, #F02F17);
}
#start:hover {
    background: linear-gradient(#FB9575, #F45A38 48%, rgb(200,0,0) 52%, #F02F17);
}
td {
    border: 5px solid rgb(32,178,170);
    height: 75px;
    width: 75px;
    cursor: pointer;
    background-color: rgb(255,255,255);
    text-align: center;
    vertical-align: center;
    font-size: 45px;
    font-family: arial, sans-serif;
}
td:hover {
    background-color: rgb(224,238,224);
}
table {
    border-collapse: collapse;
    position: absolute;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var btn = document.querySelector("#start"),
    tbl = document.querySelector("table"),
    counter = 0,
    cont = document.querySelectorAll("td"),
    forCheck;
 
btn.style.top = ((window.screen.height - btn.offsetHeight) / 2) + "px";
btn.style.left = ((window.screen.width - btn.offsetWidth) / 2) + "px";
 
tbl.style.top = ((window.screen.height - tbl.offsetHeight) / 2) + "px";
tbl.style.left = (tbl.offsetWidth * (-1)) + "px";
 
 
var toTop = btn.offsetTop,
    toRight = tbl.offsetLeft;
btn.onclick = function(){
    
    var tBtn = setInterval(function(){
        if(btn.offsetTop <= 0)
            clearInterval(tBtn);
        else{
            toTop-= 2;
            btn.style.top = toTop + "px";
        }       
    }, 1);
    var tTbl = setInterval(function(){
        if(tbl.offsetLeft >= ((window.screen.width - tbl.offsetWidth) / 2))
            clearInterval(tTbl);
        else{
            toRight+= 4;
            tbl.style.left = toRight + "px";
        }
    }, 1);
    createNewGame();
}
function createNewGame(){
    for(var i = 0; i < cont.length; i++)
        cont[i].innerText = "";
    counter = 0;
}
var elements = document.querySelectorAll("td");
function START(){     // Вот тут пытаюсь сразу каждому элементу свой метод сделать, но неполучается
    for(var i in elements){
        elements[i].onclick = function(){
            elements[i].innerText = "OK";
        }
    }
}
START();

Добавлено через 21 минуту
Вообще вот в чем проблема... elements - это массив полученных ячеек из таблицы, их всего 9 элементов. Задача такова: как сократить код что бы для каждого элемента не прописывать заново такой же код с другими индексами

JavaScript
1
2
3
4
5
6
7
8
9
elements[0].onclick = function(){                    // тут всё работает
        elements[0].innerText = "OK";
    }
 
for(var z = 0; z < elements.length; z++){         // а вот этот метод не хочет работать....
    elements[z].onclick = function(){
        elements[z].innerText = "OK";
    }
}

@vovandr · 26.04.2014, 22:52

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function START(){     // Вот тут пытаюсь сразу каждому элементу свой метод сделать, но неполучается
    for(var i = 0; i < elements.length; i++){
      (function(i){
           elements[i].onclick = function(){
                console.log(i);
                elements[i].innerText = "OK";
            }
      })(i);
    }
}
START();

@OlegPL · 26.04.2014, 23:06 **[ТС]**

Блин, спасибо большое!

Добавлено через 10 минут
Вот только я не сильно понял конструкцию

JavaScript
1
2
3
4
5
6
(function(i){
           elements[i].onclick = function(){
                console.log(i);
                elements[i].innerText = "OK";
            }
      })(i);

Можно как то объяснить или подсказать где или в каком материале это почитать? Просто функция в круглых скобках, как то для меня незнакомо и после функции еще (i).... не пойму...

@vovandr · 26.04.2014, 23:43

Почитайте про функции вызываемые на месте. В данном случае каждую итерацию мы храним в замыкании с помощью данной функции, чтобы потом в колбэке обратиться к i.

@OlegPL · 26.04.2014, 23:46 **[ТС]**

Хорошо спасибо

@GuardCat · 27.04.2014, 01:19

Назначьте событие не каждому элементу, а родителю.
И в функции определите на каком элементе был клик.

т.е. вместо

JavaScript
1
2
3
4
5
6
7
8
var elements = document.querySelectorAll("td");
function START(){ // Вот тут пытаюсь сразу каждому элементу свой метод сделать, но неполучается
  for(var i in elements){
    elements[i].onclick = function(){
      elements[i].innerText = "OK";
    }
  }
}

Эффективнее так:

JavaScript
1
2
3
4
5
6
7
var table = document.querySelector("#myTable");
table.onclick = function( e ){
  e = e || window.event;                   // для совместимости с IE8
  var target = e.target || e.srcElement;  // для совместимости с IE8
  if ( target.tagName !== "TD" ) return false; // только для ячеек
  target.innerText = "OK";
}

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	26.04.2014, 23:43
	Почитайте про функции вызываемые на месте. В данном случае каждую итерацию мы храним в замыкании с помощью данной функции, чтобы потом в колбэке обратиться к i. 1

@OlegPL 5 / 5 / 0 Регистрация: 22.10.2013 Сообщений: 103
	26.04.2014, 23:46 [ТС]
	Хорошо спасибо 0