узнать 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,786 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 элемента по которому кликнули?
Все верно в посте выше, но грамотнее было бы сократить количество обработчиков, поскольку список может быть большим. При таких однотипных действиях лучше вешать один обработчик — на родительский элемент.
Ответ написан более трёх лет назад
Комментировать
Нравится 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
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 3 часа назад
- 28 просмотров
Получить идентификатор элемента с помощью JavaScript/jQuery
В этом посте мы обсудим, как получить идентификатор элемента в JavaScript и jQuery.
Идея состоит в том, чтобы использовать .attr() или же .prop() метод, чтобы получить id значение атрибута для первого совпавшего элемента.
JS
$ ( document ) . ready ( function ( ) < $ ( '#submit' ) . click ( function ( ) < alert ( $ ( "input[type=text]" ) . prop ( "id" ) ) ;
HTML
Кроме того, вы можете просто получить доступ к базовому HTMLInputElement и получить его id имущество:
JS
$ ( document ) . ready ( function ( ) < $ ( '#submit' ) . click ( function ( ) < alert ( $ ( "input[type=text]" ) [ 0 ] . id ) ;
HTML
В простом JavaScript вы можете сделать так:
JS
document . getElementById ( ‘submit’ ) . onclick = function ( ) < alert ( document . getElementsByTagName ( 'input' ) [ 0 ] . id ) ;
HTML
Вот и все, что касается получения идентификатора элемента в JavaScript и jQuery.
Оценить этот пост
Средний рейтинг 4.5 /5. Подсчет голосов: 34
Голосов пока нет! Будьте первым, кто оценит этот пост.
Сожалеем, что этот пост не оказался для вас полезным!
Расскажите, как мы можем улучшить этот пост?
Спасибо за чтение.
Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.
Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂
Подписывайся
0 Комментарии
Встроенные отзывы
Просмотреть все комментарии
Загрузить больше комментариев
Просматривать
Подпишитесь на новые публикации
- Все проблемы
- Практика DSA
- 100 самых популярных задач
- 50 лучших классических задач
- Лучшие алгоритмы
- Компилятор С/С++
- Компилятор Java
- Компилятор Python
- Компилятор JavaScript
- компилятор PHP
- Компилятор C#
- Свяжитесь с нами
- Политика конфиденциальности
- условия обслуживания
- Подпишитесь на новые публикации
Techie Delight © 2023 Все права защищены.
Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно
получить 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 в консоль.