Определить порядковый номер div-а

@klopp · Регистрация: 14.10.2017

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

Есть div-контейнер,и в нем 64 div-а , т.е. шахматная доска. Вопрос: как получить порядковый номер клетки,по которой пользователь кликнул?
Собственные мысли:

HTML5
1
2
3
4
<body>
    <div id="game"></div>
    <h3 id="out"></h3>
</body>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//рисуем доску
var game = document.getElementById('game');
var flag = 1, turn = 1;
for(var i = 0; i < 64; i++){
    if(i && !(i % 8))
        flag *= -1;
    if(flag > 0){
        if(i & 1)
            game.innerHTML += '<div class="block dar"></div>';
        else
            game.innerHTML += '<div class="block lig"></div>';
    }
    else{
        if(!(i & 1))
            game.innerHTML += '<div class="block dar"></div>';
        else
            game.innerHTML += '<div class="block lig"></div>';
    }
}
game.onclick = function(event){ //кликаем
    event.target.innerHTML = 'W';
}

И вот дальше-где можно посмотреть порядковый номер "кликнутого" дива в этом массиве дивов?
Событие MousEvent пересмотрел в консоли.Пришла мысль по координатам
layerX:131
layerY:332
разделить на длину стороны клетки можно получить строку и столбец в матрице 8х8.
Но это как-то ненадежно,в случае изменения размера окна,разметка может поехать.
Или вот так:

JavaScript
1
2
3
4
var allblock = document.getElementsByClassName('block');//создаем массив из клеток
for(var i = 0; i < 64; i++){
    if(allblock[i].innerHtml == 'W')
  // и вот тут-то i и будет тем самым номером

Хотель бы узнать,есть ли метод попроще,поизящней и покороче?Наверняка ведь есть.
Ну и CSS прилагаю на всякий случай:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#game {
    width: 400px;
    height: 400px;
}
.block {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid white;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
    font-size: 40px;
    
}
.dar {
    background:  #800000;
}
.lig {
    background:  #FFDEAD;
}

@Balanaar · 23.10.2017, 20:31

Самый простой способ - назначить каждой клетке уникальный номер при формировании разметки.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//рисуем доску
var game = document.getElementById('game');
var flag = 1, turn = 1;
for(var i = 0; i < 64; i++){
    if(i && !(i % 8))
        flag *= -1;
    if(flag > 0){
        if(i & 1)
            game.innerHTML += '<div class="block dar" num="'+i+'"></div>';
        else
            game.innerHTML += '<div class="block lig" num="'+i+'"></div>';
    }
    else{
        if(!(i & 1))
            game.innerHTML += '<div class="block dar" num="'+i+'"></div>';
        else
            game.innerHTML += '<div class="block lig" num="'+i+'"></div>';
    }
}
game.onclick = function(event){ //кликаем
    event.target.innerHTML = 'W';
    document.getElementById('out').innerHTML = event.target.getAttribute('num');
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .