Общий обработчик для кнопок с одним классом

@hellodarkness · Регистрация: 02.05.2018

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

Есть код:

JavaScript
1
2
3
4
5
var btn = document.getElementsByClassName('button');
 
btn.onclick = function() {
  alert(this.id);
}

Ну и часть документа:

HTML5
1
2
3
4
...
<input type="button" class="button" id="btn1">
<input type="button" class="button" id="btn2">
...

Не могу понять как сделать общий обработчик при нажатии на кнопки с одинаковым классом.

Qwerty_Wasd · 02.05.2018, 23:20

hellodarkness, дать событие их родителю и по условию проверять target. Это называется делегирование.
К примеру - песочница

HTML5
1
2
3
4
5
6
7
8
<div class="parent">
  <button class="myclass">кнопка 1</button>
  <button class="myclass">кнопка 2</button>
  <button class="myclass">кнопка 3</button>
  <button class="myclass">кнопка 4</button>
  <button class="myclass">кнопка 5</button>
  <button class="myclass">кнопка 6</button>
</div>

JavaScript
1
2
3
document.querySelector('.parent').addEventListener('click',function(e){
  if (e.target.classList.contains('myclass')) alert("Я " + e.target.innerText)
})

@msheal · 03.05.2018, 10:30

В дополнение вышесказанному, обработчик можно ставить на каждый элемент выборки
https://codepen.io/anon/pen/wjeqvg?editors=1011

JavaScript
1
2
3
4
5
Array.from(document.querySelectorAll('.myclass'), function(el){
  el.onclick = function(){
    alert("Я " + this.innerText)
  }
})

Qwerty_Wasd · 03.05.2018, 12:52

msheal, приветствую

@msheal · 03.05.2018, 13:48

Не по теме:

Qwerty_Wasd, :drink:

@klopp · 04.05.2018, 03:01

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

Есть код:

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

JavaScript
1
2
3
var btn = document.getElementsByClassName('button');
for(var i = 0; i < btn.length; i++)
    btn[i].onclick = function() {alert(this.id)};

@msheal · 04.05.2018, 09:56

klopp, В этом случае обработчик ставится на родителя, так что код рабочий при условии что на странице есть только один .parent. В противном случае обработчик поставится только на первый такой элемент

Новые блоги и статьи Все статьи Все блоги /
Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	03.05.2018, 12:52
	msheal, приветствую 0

@msheal
	03.05.2018, 13:48
	Не по теме: Qwerty_Wasd, :drink: 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	04.05.2018, 09:56
	klopp, В этом случае обработчик ставится на родителя, так что код рабочий при условии что на странице есть только один `.parent`. В противном случае обработчик поставится только на первый такой элемент 0