Как получить id элемента js
Перейти к содержимому

Как получить id элемента js

  • автор:

Как получить id элемента по которому кликнули?

KorniloFF

Все верно в посте выше, но грамотнее было бы сократить количество обработчиков, поскольку список может быть большим. При таких однотипных действиях лучше вешать один обработчик — на родительский элемент.

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

dummyman

диссидент-схизматик

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 @DrunkMaster Автор вопроса
Да, всё работает только console.log(e.target.id)

dummyman

console.log() — просто выводит результат в консоль.
Вы не работали с такой?
Вызывается с помощью F12
На открывшейся панели ищите вкладку «Консоль»
Потом запустите пример и покликайте

DrunkMaster

DrunkMaster @DrunkMaster Автор вопроса
dummyman: работал, спасибо

dummyman

DrunkMaster:
Ну дык туда в параметр console.log() можно написать хоть (e) , хоть (e.target) , хоть (e.target.id) .
попробуйте сразу все три последовательно.

console.log(e) console.log(e.target) console.log(e.target.id)

DrunkMaster

DrunkMaster @DrunkMaster Автор вопроса
dummyman: Не сообразил что-то сразу. теперь буду знать

dummyman

DrunkMaster: Консоль — лучшая штука для познования недокументированных недр браузеров.
Внизу есть строка ввода, попробуйте вставить в нее и нажать Enter:
console.log(window)
Затем в появившейся строчке нажмите Window, браузер покажет вам все что вы должны знать о нем.
Потом document
console.log(document)
Затем в появившейся строчке нажмите Document, браузер покажет вам все что вы должны знать о нем.

dummyman

DrunkMaster:
Потом
console.log(document.querySelectorAll(‘*’))
В консоль выдаст все теги на странице

dummyman

И забудь про использование
document.getElementById()
document.getElementsByClassName()
Это какой-то пережиток 90-х. Реально, их я не использовал последние лет 12

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript
  • +4 ещё

Плагин Video js как сделать чтобы можно было сменить качество видео?

  • 1 подписчик
  • 50 минут назад
  • 30 просмотров

получить 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 в консоль.

узнать ID li элемента

Как при клике на элемент списка можно узнать его id, без использования атрибута onclick в li. Только на чистом JS, без Jquery.

Отслеживать
задан 10 апр 2015 в 19:58
depredator depredator
365 1 1 золотой знак 5 5 серебряных знаков 21 21 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

onClick вообще не рекомендуется использовать. Причин достаточно, см. гугл.
Чтобы не трогать вообще элементы li , можно делегировать обработчик на ul и с него определять id .
Приятная плюшка в том, что теперь можно динамически добавлять/убирать элементы li — код будет работать, тогда как навешивание кучи обработчиков на каждый элемент имеет две плохие стороны: на новые новые элементы действовать не будет и куча ненужных обработчиков, что плохо 🙂
Пример:

document.querySelector('#drag').addEventListener('click', function(e)< // Вешаем обработчик клика на UL, не LI var // Получили ID, т.к. в e.target содержится элемент по которому кликнули document.querySelector('#test strong').innerHTML = id; // For example >);

Отслеживать
ответ дан 10 апр 2015 в 20:26
user31688 user31688
Поправка: все-таки хранить цвет в id — не лучшая идея. Какой-нибудь data-color подойдет больше.
16 фев 2018 в 10:20

var inputs = document.getElementsByTagName("li"); for (var i = 0; i < inputs.length; i++) < inputs[i].addEventListener("click", myFunction); >function myFunction()

Отслеживать
ответ дан 10 апр 2015 в 20:14
7,796 1 1 золотой знак 28 28 серебряных знаков 49 49 бронзовых знаков

igumnov, ваш вариант не будет работать, событие клик отрабатывается в цикле, еще до клика этот код будет отработан и не даст никакого результата. А если запускать данный код по клику, тогда нужен еще один клик во время отработки самого цикла, чтобы получить результат. С учетом, что это всё будет происходить в доли секунды после первого клика, никакого результата от этого кода не будет. Я бы использовал свойство event.target при клике на список. вот как то так все получается: document.getElementById(«drag»).addEventListener(«click», function() < var event = window.event.target, alert(event.id)

16 фев 2018 в 5:53

@Brood, а ты пробовал запускать код из ответа igumnov? Обрати внимание, что в цикле не вызывается обработчик. Он только добавляется к элементу.

Как получить ID элемента с помощью jQuery

В процессе работы бывает, что требуется получить ID элемента jQuery по которому кликнул пользователь. На странице есть несколько таких элементов с одинаковыми классами, но с разными ID. В этом случае обработчик события клика вешается на общий класс, а не на каждый элемент. Как в этом случае получить ID? Какой от отдельной функции в JQuery не предусмотрено, но это можно сделать и другими способами.

Способ 1

Использование функции .attr() – возвращает или изменяет значение атрибутов у выбранных элементов страницы.

$(document).ready(function()< $('.button').click(function() < var clickId = $(this).attr('id'); >); >);
Способ 2

Использование функции .prop() – Возвращает или изменяет значение свойств выбранных элементов страницы.

$(document).ready(function()< $('button').click(function()< var clickId = $(this).prop('id'); alert(clickId); >); >);

Замечание .prop() удобен для работы с атрибутами, не требующими указания значений (checked и disabled в input-элементах), в большинстве других случаев, для работы с атрибутами лучше использовать .attr(), поэтому в нашем случае использовать эту функцию не совсем правильно

Способ 3

Использование указателя this, который будет указывать не на объект типа jQuery, а на DOM-аналог этого объекта.

$(document).ready(function()< $('.button').click(function()< var clickId = this.id; >); >);
Способ 4

Использование объекта event, который содержит данные о произошедшем событии.

$(document).ready(function() < $(".square").click(function(event) < var clickId = event.target.id; >); >);

Похожие записи

  • Создание объекта, определяющего способ передачи данных через ajax-запрос
  • Работа с вертикальным скроллингом элементов .scrollTop()
  • Получение или изменение значения атрибутов выбранных элементов
  • Работа с высотой элемента без внутренних отступов

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *