Как много document.getElementById сократить в один ?

@mitia73rus · Регистрация: 25.10.2013

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

Приветствую всех неравнодушных

Уже перекурил все темы про document.getElementById , но никак не пойму на своём примере. Точнее даже понимаю как оно будет работать, но не знаю как это описать в моём случае.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
<onclick type="button" id="hear"></onclick> 
        <script>
        document.getElementById('hear').onclick = function(){
        Green.OnAPILoaded.add(function(){
        Green.OnPageLoaded.add(function(page){
        var Pid= 421;
        Green.Cart.add(Pid); 
        });
        });
        }
        </script>

И таких событий onclick у меня много, нужно сократить все эти однотипные функции в одну.

@amr-now · 21.01.2020, 15:46

Здравствуйте.
mitia73rus, первое правило - практически никогда не использовать id. id мало где обязано использоваться, например, используется в <label>
Привыкайте к другим способам поиска элемента, например к классу html-элемента.

Покажите html-разметку с несколькими элементами, куда надо навешивать обработчики.
Что такое Green.OnAPILoaded и почему на него надо навешивать обработчик строго при нажатии кнопки?

Распишите понятные примеры.

@mitia73rus · 21.01.2020, 16:14 **[ТС]**

amr-now, Спасибо за ответ, Green.OnAPILoaded это функция через API.
Обработчик срабатывает на клик определенной области картинки. На каждой области свой id и Pid(id предмета)
По сути мне нужно каждый раз передавать параметр этих 2 переменных в функцию, как я понимаю

PHP/HTML
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>
 <html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img id="Map2" src=str border="0" width="478" height="164" orgWidth="478" orgHeight="164" usemap="#Mapp"/>
<map name="Mapp" id="Map2"> 
<area shape="rect" coords="476,162,478,164" alt="Image Map" style="outline:none;" />
<area id="hear"  alt="hear" shape="poly" coords="168,67,165,85,164,103,170,124,182,128,208,126,281,126,290,118,292,104,294,90,292,80,291,68,291,64" style="outline:none;" 
    <onclick type="button" id="hear"></onclick> 
<script>
        document.getElementById('hear').onclick = function(){
        Green.OnAPILoaded.add(function(){
        Green.OnPageLoaded.add(function(page){
        var Pid= 421;
        Green.Cart.add(Pid); 
        });
        });
        }
        </script>
</map>
</body>
</html>

@Balanaar · 21.01.2020, 16:43

Сообщение от amr-now

первое правило - практически никогда не использовать id

Почему? Поиск элементов по ID осуществляется практически мгновенно в отличие от поиска по селекторам или классам, поскольку такие элементы попадают в глобальный объект window и не только. Их положение в DOM-структуре можно однозначно определить. Особенно может быть заметно при очень большой структуре DOM.

@amr-now · 21.01.2020, 18:25

mitia73rus, разметка сильно поломана.
Клик должен быть на <area> ? Что за элемент <onclick> ?
Где id и pid на каждом <area> ?

Добавлено через 2 минуты

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

как я понимаю

У меня пока ощущение, что Вы ещё не разобрались в смысле API Green.
Есть общедоступный сайт этого API ?

Добавлено через 8 минут
-----
Мы здесь можем упростить условие, исключив API?
Например, будет несколько <area>. К каждой area привязана пара id и pid.
При клике на любой <area> вывести в console.log() его привязанные числа id и pid.

Такое условие задачи будет нормальное?

@mitia73rus · 21.01.2020, 18:46 **[ТС]**

amr-now,

Сообщение от amr-now

Мы здесь можем упростить условие, исключив API?

да, без проблем

Сообщение от amr-now

Такое условие задачи будет нормальное?

Да, будет отлично!

@zasadadada · 21.01.2020, 18:53

"практически никогда не использовать id" - вроде как это самый быстрый способ получения доступа.
https://stackoverflow.com/ques... ass-and-id

@amr-now · 21.01.2020, 20:59

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <img class="map" src="" border="1" width="720" height="1605" alt="" usemap="#map" />
    <map name="map">
        <area shape="poly" coords="92, 1256, 93, 1297, 157, 1296, 156, 1256" data-id="1" data-pid="100" />
        <area shape="poly" coords="91, 1217, 92, 1257, 156, 1255, 155, 1216" data-id="2" data-pid="200" />
        <area shape="poly" coords="90, 1178, 92, 1218, 155, 1216, 156, 1177" data-id="3" data-pid="300" />
        <area shape="poly" coords="88, 1138, 90, 1178, 156, 1177, 154, 1136" data-id="4" data-pid="400" />
        <area shape="poly" coords="88, 1097, 89, 1137, 154, 1137, 152, 1095" data-id="5" data-pid="500" />
        <area shape="poly" coords="87, 1057, 88, 1097, 152, 1095, 152, 1056" data-id="6" data-pid="600" />
        <area shape="poly" coords="86, 1017, 87, 1056, 152, 1055, 151, 1014" data-id="7" data-pid="700" />
        <area shape="poly" coords="85, 975, 86, 1016, 151, 1015, 149, 974" data-id="8" data-pid="800" />
        <area shape="poly" coords="84, 934, 85, 974, 149, 974, 147, 934" data-id="9" data-pid="900" />
    </map>
    <script>
        for (let area of document.querySelectorAll("map area")) {
            area.onclick = area_click;
        }
 
        function area_click() {
            console.log(this.dataset.id, this.dataset.pid);
        }
    </script>
</body>
</html>

mitia73rus, во время съёмок этого фильма ни одного id не пострадало.

Добавлено через 4 минуты
Прикольно, что в MS Edge бордюр появился, а в Опере нет ))
В MS Edge работает.

Добавлено через 8 минут
-----------
Добился, чтобы картинка без картинки в Опере тоже заработала - стилем.

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        img {
            display: block;
        }
    </style>
</head>
<body>
    <img class="map" src="" border="1" width="720" height="1605" alt="" usemap="#map" orgWidth="720" orgHeight="1605" />
    <map name="map">
        <area shape="poly" coords="92, 1256, 93, 1297, 157, 1296, 156, 1256" data-id="1" data-pid="100" />
        <area shape="poly" coords="91, 1217, 92, 1257, 156, 1255, 155, 1216" data-id="2" data-pid="200" />
        <area shape="poly" coords="90, 1178, 92, 1218, 155, 1216, 156, 1177" data-id="3" data-pid="300" />
        <area shape="poly" coords="88, 1138, 90, 1178, 156, 1177, 154, 1136" data-id="4" data-pid="400" />
        <area shape="poly" coords="88, 1097, 89, 1137, 154, 1137, 152, 1095" data-id="5" data-pid="500" />
        <area shape="poly" coords="87, 1057, 88, 1097, 152, 1095, 152, 1056" data-id="6" data-pid="600" />
        <area shape="poly" coords="86, 1017, 87, 1056, 152, 1055, 151, 1014" data-id="7" data-pid="700" />
        <area shape="poly" coords="85, 975, 86, 1016, 151, 1015, 149, 974" data-id="8" data-pid="800" />
        <area shape="poly" coords="84, 934, 85, 974, 149, 974, 147, 934" data-id="9" data-pid="900" />
    </map>
    <script>
        for (let area of document.querySelectorAll("map area")) {
            area.onclick = area_click;
        }
 
        function area_click() {
            console.log(this.dataset.id, this.dataset.pid);
        }
    </script>
</body>
</html>

@mitia73rus · 23.01.2020, 13:15 **[ТС]**

amr-now, спасибо за помощь.

@kalabuni · 07.05.2020, 13:10

Сообщение от amr-now

во время съёмок этого фильма ни одного id не пострадало.

неправда ваша, пострадали все девять id, ибо не должны их значения начинаться с цифр (соответственно, не должны содержать только цифры)
см https://www.w3.org/TR/html4/types.html#type-name

@kalabuni · 08.05.2020, 01:44

amr-now, увы мне, я в вашем коде увидел id="1" и id="9", не заметив впереди идущие data-
плиз, извините
и будьте здоровы!

@Peskova_Sveta · 08.05.2020, 05:31

Добавлено через 1 минуту

Сообщение от amr-now

практически никогда не использовать id

это для css хорошо

Сообщение от amr-now

например к классу html-элемента

у такого подхода есть слабое место, если элементы с таким же классом будут добавляться (или удаляться) динамически, то поедет вся логика

@kalabuni · 08.05.2020, 13:53

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

у такого подхода есть слабое место

проблему идентификации нужного html-элемента, имхо, лучше всего решает метод querySelector (), если в селектор "забить" в квадратных скобках пару-тройку атрибутов элемента с их значениями (включая кириллические)
пример: кнопку с надписью "Нажмите!" однозначно вернёт конструкция document.querySelector ('input[type="button"][value="Нажмите!"]')

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	21.01.2020, 15:46
	Здравствуйте. mitia73rus, первое правило - практически никогда не использовать id. id мало где обязано использоваться, например, используется в <label> Привыкайте к другим способам поиска элемента, например к классу html-элемента. Покажите html-разметку с несколькими элементами, куда надо навешивать обработчики. Что такое Green.OnAPILoaded и почему на него надо навешивать обработчик строго при нажатии кнопки? Распишите понятные примеры. 1

@zasadadada 81 / 40 / 22 Регистрация: 03.05.2013 Сообщений: 722
	21.01.2020, 18:53
	"практически никогда не использовать id" - вроде как это самый быстрый способ получения доступа. https://stackoverflow.com/ques... ass-and-id 2

@mitia73rus 0 / 0 / 1 Регистрация: 25.10.2013 Сообщений: 10
	23.01.2020, 13:15 [ТС]
	amr-now, спасибо за помощь. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	08.05.2020, 01:44
	amr-now, увы мне, я в вашем коде увидел id="1" и id="9", не заметив впереди идущие data- плиз, извините и будьте здоровы! 1

Как много document.getElementById сократить в один ?

Решение