Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
566 / 465 / 183
Регистрация: 14.10.2017
Сообщений: 1,259

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

23.10.2017, 18:17. Показов 2199. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть 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;
}
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
23.10.2017, 18:17
Ответы с готовыми решениями:

Определить порядковый номер элемента
Добрый день, у меня есть структура подобного вида &lt;div class=&quot;tabs_calendar&quot;&gt; &lt;div class=&quot;tab_calendar_event_global&quot;&gt;...

Вводим номер месяца M и дня D. Определить порядковый номер дня в году T соответствующий этой дате
Вводим номер месяца M и дня D. Определить порядковый номер дня в году T соответствующий этой дате. Помогите. Очень нужно ...

Определить порядковый номер числа
Даны четыре целых числа, одно из которых отлично от трех других, равных между собой. Определить порядковый номер числа, отличного от...

1
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
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');
}
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
23.10.2017, 20:31
Помогаю со студенческими работами здесь

Определить порядковый номер сопротивления
В результате Измерений получены напряжения в Вольтах на зажимах каждого из 20 ти различных электрических сопротивлений, не соединенных друг...

Определить порядковый номер наименьшего из них
Дана непустая последовательность различных чисел. Определить порядковый номер наименьшего из них Надо решить без массивов Заранее...

Определить порядковый номер элемента последовательности
Всем привет! помогите пожалуйста срочно решить задачи №2. Определить порядковый номер элемента последовательности 21, 22, 23,…,2n,...

Определить порядковый номер 1-го символа F в строке
дана строка 10 символов определить порядковый номер 1-го символа F в строке

Определить порядковый номер минимального элемета
Помогите решить в Borland c++ Если можно еще блок-схему Задан массив целых чисел. Определить порядковый номер минимального элемета


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
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-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru