Как получить ID элемента на который нажали? JS
Есть несколько div’ов , которые составляют шахматную доску, фигуры также находятся на шахматной доске, каждая из них в отдельном div’е , а у каждого div’a есть свой ID. Хотелось бы через eventListener узнавать какой объект был нажат, но приписывать его каждому слишком долго и нудно, поэтому хотелось бы как-то автоматизировать данный процесс. Как такое реализовать?
Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
задан 19 сен 2020 в 18:22
2,795 2 2 золотых знака 15 15 серебряных знаков 57 57 бронзовых знаков
Как получить id элемента по которому кликнули?
Все верно в посте выше, но грамотнее было бы сократить количество обработчиков, поскольку список может быть большим. При таких однотипных действиях лучше вешать один обработчик — на родительский элемент.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
диссидент-схизматик
UPD Немного изменил решение прямо по вашему заказу
var buttons = document.querySelectorAll('.text.block'); var test1 = document.querySelector('#test1'); var test2 = document.querySelector('#test2'); Array.from(buttons).forEach(function(button)< button.addEventListener('click', function(e) < test1.innerHTML=e.target.id; test2.innerHTML=e.target.innerHTML; console.log(e.target); >) >);Ответ написан более трёх лет назад
DrunkMaster @DrunkMaster Автор вопроса
Да, всё работает только console.log(e.target.id)
console.log() — просто выводит результат в консоль.
Вы не работали с такой?
Вызывается с помощью F12
На открывшейся панели ищите вкладку «Консоль»
Потом запустите пример и покликайте
DrunkMaster @DrunkMaster Автор вопроса
dummyman: работал, спасибо
DrunkMaster:
Ну дык туда в параметр console.log() можно написать хоть (e) , хоть (e.target) , хоть (e.target.id) .
попробуйте сразу все три последовательно.
console.log(e) console.log(e.target) console.log(e.target.id)
DrunkMaster @DrunkMaster Автор вопроса
dummyman: Не сообразил что-то сразу. теперь буду знать
DrunkMaster: Консоль — лучшая штука для познования недокументированных недр браузеров.
Внизу есть строка ввода, попробуйте вставить в нее и нажать Enter:
console.log(window)
Затем в появившейся строчке нажмите Window, браузер покажет вам все что вы должны знать о нем.
Потом document
console.log(document)
Затем в появившейся строчке нажмите Document, браузер покажет вам все что вы должны знать о нем.
DrunkMaster:
Потом
console.log(document.querySelectorAll(‘*’))
В консоль выдаст все теги на странице
И забудь про использование
document.getElementById()
document.getElementsByClassName()
Это какой-то пережиток 90-х. Реально, их я не использовал последние лет 12
получить id по клику js
Для получения id элемента по клику в JavaScript можно использовать следующий код:
const element = document.getElementById('myElementId'); element.addEventListener('click', function () const id = this.id; console.log(id); >); В этом примере мы получаем элемент с id «myElementId» и добавляем к нему обработчик события click . Внутри обработчика мы получаем id элемента, на который кликнули, используя ключевое слово this . Затем мы выводим id в консоль.
Element: id property
The id property of the Element interface represents the element’s identifier, reflecting the id global attribute.
If the id value is not the empty string, it must be unique in a document.
The id is often used with getElementById() to retrieve a particular element. Another common case is to use an element’s ID as a selector when styling the document with CSS.
Note: Identifiers are case-sensitive, but you should avoid creating IDs that differ only in the capitalization.
Value
Specifications
| Specification |
|---|
| DOM Standard # ref-for-dom-element-id① |
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on Apr 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.